benchmark 2d canas strokes

test_canvas_strokes.js

var c = document.createElement('canvas');
c.width = innerWidth;
c.height = innerHeight;

var ctx = c.getContext('2d');

document.body.appendChild(c);

var last = performance.now();
var delay = 0;

function animate() {
	requestAnimationFrame(animate);

	var now = performance.now();

	delay = (now - last) * 0.05 + delay * 0.95;
	last = now;

	ctx.clearRect(0, 0, c.width, c.height);
	ctx.fillText(~~delay +'ms / ' +  (1000/ delay | 0) + 'fps', 50, 50);

	LINES = 2000;
	ctx.lineWidth = LINE_WIDTH;
	
	for (i=0; i < LINES; i++) {

		// If test lines	
		ctx.beginPath();
		ctx.moveTo(50 + Math.random() * innerWidth * 0.8, 50 + Math.random() * innerHeight * 0.8);
		ctx.lineTo(50 + Math.random() * innerWidth * 0.8, 50 + Math.random() * innerHeight * 0.8);
		ctx.stroke();

		// If test curves
 		ctx.beginPath();
 		ctx.moveTo(50 + Math.random() * innerWidth * 0.8, 50 + Math.random() * innerHeight * 0.8);
 		ctx.quadraticCurveTo(
 			50 + Math.random() * innerWidth * 0.8, 50 + Math.random() * innerHeight * 0.8,
 			50 + Math.random() * innerWidth * 0.8, 50 + Math.random() * innerHeight * 0.8);
 		ctx.stroke();

	}

}

animate();