SVG vs Canvas (random line draw)

Benchmark created on

Setup

function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

Test runner

Ready to run.

Testing in
TestOps/sec
Canvas
const canvas = document.createElement("canvas");
const max = 250;
canvas.style.width = max + "px";
canvas.style.height = max + "px";
document.body.appendChild(canvas);
const ctx = canvas.getContext("2d");
ctx.strokeStyle = 'red';
for (let i = 0; i < 100; i++)
	{
	ctx.beginPath();
	ctx.moveTo(getRandomInt(max), getRandomInt(max));
	ctx.lineTo(getRandomInt(max), getRandomInt(max));
	ctx.stroke();
	}
ready
SVG
const namespace = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(namespace, "svg");
const max = 250;
svg.style.width = max + "px";
svg.style.height = max + "px";
document.body.appendChild(svg);
let line;
for (let i = 0; i < 100; i++)
	{
	line = document.createElementNS(namespace, "line");
	line.setAttribute("stroke", "red");
	line.setAttribute("x1",getRandomInt(max));
	line.setAttribute("x2",getRandomInt(max));
	line.setAttribute("y1",getRandomInt(max));
	line.setAttribute("y2",getRandomInt(max));
	svg.appendChild(line);
	}
ready

Revisions

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