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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 9 months 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	2514.3 Ops/sec
putImageData	50.6 Ops/sec

tmpcanvas (version: 0)

Comparing performance of: fillRect vs putImageData

Created: 9 months ago by: Guest

Jump to the latest result

fillRect

putImageData

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A