Benchmark: canvas drawing images

HTML Preparation code:

<canvas></canvas>

Script Preparation code:

 'use strict'
let image,
    imageData,
    ctx = new OffscreenCanvas(0, 0).getContext('2d'),
    main = document.querySelector('canvas'),
    c = main.getContext('2d'),
    width, height,
    imageAsBlob,
    imageAsBitmap
async function globalMeasureThatScriptPrepareFunction() {
    image = await loadImage();
    ({
        width,
        height
    } = image)
    ctx.canvas.width = main.width = width
    ctx.canvas.height = main.height = height
    ctx.drawImage(image, 0, 0, width, height)
    imageData = ctx.getImageData(0, 0, width, height)
    imageAsBlob = await loadImage(URL.createObjectURL(await ctx.canvas.convertToBlob()))
}

function loadImage(url = `https://www.measurethat.net/images/Picture1.png`) {
    return new Promise(resolve => {
        const img = new Image
        img.src = url
        img.onload = () => resolve(img)
    })
}

function clear() {
    c.clearRect(0, 0, width, height)
}
const repeatCount = 40

function test(num) {
    switch (num) {
        case 1:
            for (let n = repeatCount; n--;) {
                c.drawImage(image, 0, 0, width, height)
                clear()
            }
            break
        case 2:
            for (let n = repeatCount; n--;) {
                c.putImageData(imageData, 0, 0,)
                clear()
            }
            break
        case 3:
            for (let n = repeatCount; n--;) {
                c.drawImage(imageAsBlob, 0, 0)
                clear()
            }
            break
    }
}

Tests:

draw image directly
test(1)
draw imageData
test(2)
draw image blob
test(3)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
draw image directly
draw imageData
draw image blob

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36 Edg/134.0.0.0

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
draw image directly	31184.7 Ops/sec
draw imageData	298.0 Ops/sec
draw image blob	30245.3 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 months ago):

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON focuses on measuring the performance of different methods for drawing images onto a canvas in a web context using JavaScript. The three methods being compared are:

1. **Drawing the image directly** - `test(1)`: This method involves using the `drawImage` function directly on the image. Here, the full image is rendered onto the canvas without any transformation or manipulation.

2. **Using image data** - `test(2)`: In this method, the image is first converted to an `ImageData` object using the `getImageData` function, which retrieves pixel data from the canvas. The `putImageData` function is then utilized to render this pixel data back onto the canvas.

3. **Drawing an image blob** - `test(3)`: This approach uses `ImageBitmap` created from a blob of the image data generated by `convertToBlob`. The image is drawn on the canvas using the `drawImage` method that takes this blob representation.

### Pros and Cons of Different Approaches

1. **Draw Image Directly (`test(1)`)**
   - **Pros**: 
     - Simplest and potentially fastest method for rendering images, as it directly draws from the source image without any intermediary conversion.
     - Ideal for static images that do not need processing or manipulation.
   - **Cons**: 
     - May not be as flexible as other methods if manipulation or transformations on the pixel data are required.

2. **Draw ImageData (`test(2)`)**
   - **Pros**: 
     - Provides low-level access to the pixel data, which allows for manipulation of individual pixels. This is useful for effects, filtering, and other pixel-level modifications.
   - **Cons**: 
     - Generally more resource-intensive and slower for rendering compared to direct drawing. The overhead of copying pixel data to and from the `ImageData` object contributes to lower performance.

3. **Draw Image Blob (`test(3)`)**
   - **Pros**: 
     - Potentially useful for scenarios involving dynamic images or when images are generated or altered on-the-fly, as conversion to a blob can serve various cases including storage and transmission.
     - The use of `ImageBitmap` can provide performance benefits since it allows the browser to handle the image data more efficiently.
   - **Cons**: 
     - The process of converting an image to a blob and then creating an `ImageBitmap` may introduce additional overhead compared to drawing directly.

### Library and Syntax Considerations
In this benchmark, no external libraries are utilized aside from the standard web APIs. The script primarily uses the HTML5 `<canvas>` element capabilities, including:

- **CanvasRenderingContext2D**: The API associated with canvas elements, allowing for 2D rendering operations.
- **Image and ImageData**: Standard HTML elements used for handling image loading and pixel manipulation.

### Results Discussion
The benchmark results reveal significant performance differences between the methods tested:

- **Directly drawing the image** achieved the highest number of executions per second (2257.1), making it the most efficient approach for simple image rendering.
- **Drawing from a blob** was the second-best performing option (2090.0), suggesting that while it is slightly less efficient than direct rendering, it still offers respectable performance, particularly in scenarios involving dynamic images.
- **Drawing using image data** had the lowest performance (46.8), highlighting the overhead associated with manipulating pixel data compared to direct methods.

### Alternatives
Other alternatives beyond the methods tested include:

1. **WebGL**: For more complex graphics, utilizing WebGL can significantly enhance performance and provide hardware acceleration, making it suitable for rendering 2D and 3D graphics.
2. **SVG (Scalable Vector Graphics)**: If the images are vector-based, using SVG may be more efficient and offer better scalability, although it doesn't offer pixel manipulation like canvas.
3. **Libraries like PixiJS or Three.js**: These libraries abstract away many complexities of canvas and WebGL rendering while providing optimized methods for rendering images and graphics.

Each approach has its own use cases, and the best choice depends on the specific needs of the application, such as the required performance, the need for pixel manipulation, or the complexity of the graphics being rendered.

Related benchmarks:

canvas drawing images (version: 1)

Comparing performance of: draw image directly vs draw imageData vs draw image blob

Created: 3 months ago by: Guest

Jump to the latest result

draw image directly

draw imageData

draw image blob

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 months ago):