canvas test

Benchmark created on

Preparation HTML

<canvas id="test" width="500px" height="500px"></canvas>

Test runner

Ready to run.

Testing in
TestOps/sec
A
let cnv = document.getElementById("test");
let ctx = cnv.getContext("2d");
let f = new Path2D();
f.arc(250,250,100,0,2*Math.PI);
ctx.fillStyle = 'black';
ctx.fill(f);

let r = (a) => Math.random()*a; 
let rP = () => { 
	let x = r(500);
	let y = r(500);
	return {x,y};
}

for (let i=0;i<50;i++){
	let p = rP();
	ctx.isPointInPath(f,p.x,p.y);
}
ready
B
let cnv = document.getElementById("test");
let ctx = cnv.getContext("2d");
let f = new Path2D();
f.arc(250,250,100,0,2*Math.PI);
ctx.fillStyle = 'black';
ctx.fill(f);

let img = ctx.getImageData(0,0,500,500);

let getRedColor = (x, y) =>  y * (500 * 4) + x * 4;


let r = (a) => Math.random()*a; 
let rP = () => { 
	let x = r(500);
	let y = r(500);
	return {x,y};
}

for (let i=0;i<50;i++){
	let p = rP();
	let ref = img.data[getRedColor(Math.floor(p.x),Math.floor(p.y))];
	(ref == 0);

}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.