Menu

jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.

jsperf.com URLs are mirrored at the same path, e.g:

https://jsperf.com/negative-modulo/2

Can be accessed at:

https://jsperf.app/negative-modulo/2

Test case details

Title *

Description
(Markdown syntax is allowed)

Preparation Code

Preparation HTML
(this will be inserted in the <body> of a valid HTML5 document in standards mode)
(useful when testing DOM operations or including libraries)

Setup JS

var c = document.createElement('canvas');
    c.width = 1700;
    c.height = 1000;
    
    var ctx = c.getContext('2d');
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, 1700, 1000);
    
    var fill, global;

Teardown JS


    var p = ctx.getImageData(0, 0, 1, 1);
    if (p.data[3] != 0) throw ("canvas did not clear!");

Test cases

Test #1

Title *

Async

Code *

ctx.clearRect(0, 0, c.width, c.height);

Test #2

Title *

Async

Code *

global = ctx.globalCompositeOperation;
fill = ctx.fillStyle;
ctx.globalCompositeOperation = 'copy';
ctx.fillStyle = 'rgba(0,0,0,0)';
ctx.fillRect(0, 0, c.width, c.height);
ctx.globalCompositeOperation = global;
ctx.fillStyle = fill;

Test #3

Title *

Async

Code *c.width = c.width;

Test #4

Title *

Async

Code *

// Store the current transformation matrix
ctx.save();

// Use the identity matrix while clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, c.width, c.height);

// Restore the transform
ctx.restore();

Test #5

Title *

Async

Code *ctx.putImageData(ctx.createImageData(c.width, c.height), 0, 0); // clear context by putting empty image data

Test #6

Title *

Async

Code *

// Use the identity matrix while clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, c.width, c.height);

// Restore the transform
ctx.setTransform(1, 0, 0, 1, 0, 0);