Canvas ops (v4)

Revision 4 of this benchmark created on

Description

How to draw a border?

Preparation HTML

<canvas id="canvas" width="1000" height="1000"><canvas>

Setup

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d', { globalAlpha: false });
const x = 20.34;
const y = 342.12;
const width = 124;
const height = 111;
const radii = 7.12;
const borderWidth = 2.13;
const TIMES = 1000;

ctx.clearRect(0, 0, 1000, 1000);

Test runner

Ready to run.

Testing in
TestOps/sec
Stroke + fill
for (let i = 0; i < TIMES; i++) {
	ctx.strokeStyle = 'red';
	ctx.lineWidth = borderWidth;
	ctx.beginPath();
	ctx.roundRect(x + borderWidth / 2, y + borderWidth / 2, width - borderWidth, height - borderWidth, radii - borderWidth / 2);
	ctx.stroke();
	ctx.fillStyle = 'black';
	ctx.beginPath();
	ctx.roundRect(x + borderWidth, y + borderWidth, width - 2 * borderWidth, height - 2 * borderWidth, radii - borderWidth);
	ctx.fill();
}
ready
Fill + fill
for (let i = 0; i < TIMES; i++) {
	ctx.fillStyle = 'red';
	ctx.beginPath();
	ctx.roundRect(x, y, width, height, radii);
	ctx.fill();
	ctx.fillStyle = 'black';
	ctx.beginPath();
	ctx.roundRect(x + borderWidth, y + borderWidth, width - 2 * borderWidth, height - 2 * borderWidth, radii - borderWidth);
	ctx.fill();
}
ready
Fill+evenodd + fill
for (let i = 0; i < TIMES; i++) {
	ctx.fillStyle = 'red';
	ctx.beginPath();
	ctx.roundRect(x, y, width, height, radii);
	ctx.roundRect(x + borderWidth, y + borderWidth, width - 2 * borderWidth, height - 2 * borderWidth, radii - borderWidth);
	ctx.fill('evenodd');
	ctx.fillStyle = 'black';
	ctx.beginPath();
	ctx.roundRect(x + borderWidth, y + borderWidth, width - 2 * borderWidth, height - 2 * borderWidth, radii - borderWidth);
	ctx.fill();
}
ready

Revisions

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