Benchmark: tmpcanvas2 - 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);
        }
    }

}

function drawMap3(arr, canvas, sz = 80) {
    const ctx = canvas.getContext('2d');
    const imageData = ctx.createImageData(sz, sz);
    const data = imageData.data;
    const U_M = [64, 32, 16, 8, 4, 2, 1];

    let len = arr.length;
    let mmInt;
    let sidx = 3;
    let h = 0;
    let i = 0;
    let dataIndex = 0;

    while (sidx < len && i < sz) {
        mmInt = arr[sidx++];
        if (mmInt >= 128) {
            mmInt -= 128;
            h += mmInt;
            dataIndex += mmInt * 4; // Skip blank pixels in the imageData
        } else {
            for (let i2 = 0; i2 < 7 && h < sz; i2++) {
                if ((mmInt & U_M[i2]) > 0) {
                    data[dataIndex] = data[dataIndex + 1] = data[dataIndex + 2] = 0; // Set black pixel
                    data[dataIndex + 3] = 255; // Opaque alpha
                }
                dataIndex += 4;
                h++;
            }
        }
        if (h >= sz) {
            h = 0;
            i++;
        }
    }

    ctx.putImageData(imageData, 0, 0);
}

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
fillRect
putImageData
createImageData

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Browser/OS: Chrome 114 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
fillRect	2453.0 Ops/sec
putImageData	49.8 Ops/sec
createImageData	16270.1 Ops/sec

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

LLMs can make mistakes. Check important info.

To answer this question, we need to analyze the provided benchmark results and identify any patterns or trends.

The latest benchmark results show the following:

* `fillRect`: 2452 executions per second
* `putImageData`: 49 executions per second
* `createImageData`: 16270 executions per second (which is the highest among all three)

Based on these results, it appears that `drawMap3` (which calls `createImageData`) is the fastest benchmark, while `fillRect` and `putImageData` are slower.

However, without more information about the actual code being tested, such as the implementation of `drawMap`, `drawMap2`, and `drawMap3`, it's difficult to provide a detailed analysis or explanation for these results.

But, if I had to take an educated guess based on the provided benchmark results, I would say that:

1. The `createImageData` function is performing well due to its high execution rate (16270 executions per second).
2. The `fillRect` and `putImageData` functions are slower, possibly because they require more complex calculations or memory allocation.
3. The `drawMap` function (which calls `drawMap2` and `drawMap3`) is the slowest among the three.

Please note that this is a rough estimate based on limited information and should be taken with a grain of salt until further analysis is conducted.

Related benchmarks:

tmpcanvas2 (version: 0)

Comparing performance of: fillRect vs putImageData vs createImageData

Created: one year ago by: Guest

Jump to the latest result

fillRect

putImageData

createImageData

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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