Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
benchmark 2d canas strokes
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();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment