Benchmark: tmpcanvas - MeasureThat.net

Script Preparation code:

var canvas = new OffscreenCanvas(80, 80);
var arr = new Uint8Array([0, 48, 117, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 250, 96, 146, 64, 176, 67, 207, 64, 206, 66, 201, 66, 188, 96, 33, 36, 188, 65, 64, 76, 184, 89, 122, 3, 182, 66, 99, 56, 12, 180, 64, 137, 73, 32, 187, 67, 25, 96, 80, 171, 108, 114, 46, 112, 4, 177, 68, 103, 38, 135, 64, 168, 102, 31, 126, 57, 66, 174, 110, 6, 51, 127, 183, 71, 103, 31, 72, 8, 175, 77, 7, 127, 54, 118, 173, 108, 1, 46, 32, 32, 160, 96, 32, 1, 63, 56, 64, 167, 112, 68, 2, 83, 112, 135, 96, 161, 67, 16, 1, 27, 6, 120, 169, 67, 12, 14, 5, 49, 65, 166, 64, 15, 127, 7, 92, 1, 64, 156, 64, 49, 71, 59, 120, 24, 166, 110, 56, 7, 13, 83, 22, 168, 96, 32, 30, 3, 125, 80, 167, 76, 135, 127, 12, 71, 175, 80, 64, 40, 7, 64, 172, 104, 46, 92, 114, 48, 174, 64, 12, 32, 105, 100, 175, 72, 1, 71, 6, 120, 172, 109, 77, 120, 15, 126, 172, 123, 89, 120, 7, 102, 172, 110, 24, 24, 137, 68, 180, 118, 82, 32, 6, 177, 98, 123, 96, 184, 126, 14, 25, 187, 80, 9, 7, 186, 96, 44, 71, 64, 190, 96, 22, 16, 196, 120, 64, 189, 66, 35, 194, 64, 32, 194, 66, 56, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 152]);

function drawMap(arr, canvas, sz = 80) {
    const ctx = canvas.getContext('2d');
    const U_M = [64, 32, 16, 8, 4, 2, 1];
    const len = arr.length;
    let mmInt;
    let sidx = 3;
    let i = 0;
    let i2;
    let h = 0;
    for (; sidx < len && !(i >= sz);) {
        if (((mmInt = arr[sidx++]), mmInt >= 128)) {
            for (
                mmInt -= 128, i2 = 0; i2 < mmInt && !(h++, h >= sz && ((h = 0), i++, i >= sz)); i2++
            ) {}
        } else {
            for (
                i2 = 0; i2 < 7 &&
                !((mmInt & U_M[i2]) > 0 && ctx.fillRect(h, i, 1, 1),
                    h++,
                    h >= sz && ((h = 0), i++, i >= sz)); i2++
            ) {}
        }
    }
}

function drawMap2(arr, canvas, size = 80) {
    const ctx = canvas.getContext('2d');
    const U_M = [64, 32, 16, 8, 4, 2, 1];
    const len = arr.length;
    let mmInt, sidx = 3,
        x = 0,
        y = 0;

    function drawPixel(x, y) {
        const pixel = ctx.createImageData(1, 1);
        const color = [0, 0, 0, 255]; // Black pixel (R, G, B, Alpha)
        pixel.data.set(color);
        ctx.putImageData(pixel, x, y);
    }

    function drawBlankSequence(count) {
        x += count;
        if (x >= size) {
            x = 0;
            y++;
        }
    }

    function drawBinarySequence(binaryValue) {
        for (let i = 0; i < 7 && x < size; i++) {
            if ((binaryValue & U_M[i]) > 0) {
                drawPixel(x, y);
            }
            x++;
        }
        if (x >= size) {
            x = 0;
            y++;
        }
    }
    while (sidx < len && y < size) {
        mmInt = arr[sidx++];
        if (mmInt >= 128) {
            drawBlankSequence(mmInt - 128);
        } else {
            drawBinarySequence(mmInt);
        }
    }

}

Tests:

fillRect
drawMap(arr, canvas);
putImageData
drawMap2(arr, canvas);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
fillRect
putImageData

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided benchmark measures the performance of two different approaches for drawing on an OffscreenCanvas in JavaScript: `drawMap` and `drawMap2`. Both functions are designed to process binary data, which represents a map with varying pixel densities.

**drawMap**

This function uses a simple, iterative approach to draw the map. It iterates through the binary data, processing values above 128 (which indicates a blank sequence) by incrementing a counter until it exceeds the canvas size. Values below 128 are processed by drawing small rectangles on the canvas using `fillRect`. This approach is likely optimized for performance but may not be as efficient as other methods.

**drawMap2**

This function uses a more modular, object-oriented approach to draw the map. It defines three helper functions: `drawPixel`, `drawBlankSequence`, and `drawBinarySequence`. These functions are used to process each part of the binary data:

1.  `drawBinarySequence`: Draws small rectangles on the canvas using `putImageData` for values above 128.
2.  `drawBlankSequence`: Increments a counter until it exceeds the canvas size, effectively skipping over blank sequences.
3.  `drawPixel`: Creates an image data object and sets its pixel value to black (for the canvas).

This approach is more modular and easier to understand but may introduce additional overhead due to the helper functions.

**Benchmark Results**

The benchmark results show that:

*   `drawMap` outperforms `drawMap2`, with 2514.32 executions per second compared to 50.57 executions per second.
*   The performance difference is likely due to the optimization in `drawMap`'s iterative approach versus the overhead introduced by the helper functions in `drawMap2`.

In summary, the benchmark measures the performance of two different approaches for drawing on an OffscreenCanvas: a simple, iterative approach (`drawMap`) and a more modular, object-oriented approach (`drawMap2`). The results indicate that the simpler approach is faster.

Related benchmarks:

tmpcanvas (version: 0)

Comparing performance of: fillRect vs putImageData

Created: 2 years ago by: Guest

Jump to the latest result

fillRect

putImageData

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):