clearRect vs createElement

Benchmark created on

Description

This benchmark compares the performance of creating a new, clean Canvas to draw on all the time vs. the performance of re-using the same Canvas and clearing it before using it again

Setup

const staticCanvas = document.createElement('canvas');

staticCanvas.width = 500;
staticCanvas.height = 500;

const staticCtx = staticCanvas.getContext("2d");

Test runner

Ready to run.

Testing in
TestOps/sec
createElement
for (let i = 0; i < 1000;i++) {
	const canvas = document.
createElement('canvas');
	canvas.width = 500;
	canvas.height = 500;
	
	const ctx = canvas.getContext("2d");
	ctx.fillStyle = "green";
	ctx.fillRect(0, 0, 250, 250);
}
ready
clearRect
for (let i = 0; i < 1000;i++) {
    staticCtx.clearRect(0,0,500,500);
	staticCtx.fillStyle = "green";
	staticCtx.fillRect(0, 0, 250, 250);
}
ready

Revisions

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