raf

Benchmark created on March 11, 2024

Setup

let canvas = document.createElement('canvas')

canvas.width = 500 
canvas.height = 500 
canvas.style.width = '500px'
canvas.style.height = '500px'

document.body.appendChild(canvas)

let ctx = canvas.getContext('2d')

function drawSquare() {
	ctx.fillStyle = '#f00'
	ctx.beginPath() 
	ctx.rect(0, 0, 300, 300)
	ctx.fill()
}

function drawCircle() {
	ctx.fillStyle = '#0f0'
	ctx.beginPath() 
	ctx.arc(250, 250, 100, 0, Math.PI * 2)
	ctx.fill()
}

function drawPath() {
	ctx.strokeStyle = '#0ff'
	ctx.beginPath()
	ctx.moveTo(0, 0)
	ctx.lineTo(100, 100)
	ctx.lineTo(450, 300)
	ctx.closePath()
	ctx.stroke()
}

let lastTime = 0
function rafSingle() {
	let time = Date.now()
	let elapsed = time - lastTime
	if (elapsed > 20) {
		lastTime = time 
		drawSquare()
		drawCircle()
		drawPath()
	}
	
	requestAnimationFrame(rafSingle)
}

let lastTimeSquare = 0
function rafSquare() {
	let time = Date.now()
	let elapsed = time - lastTimeSquare
	if (elapsed > 20) {
		lastTimeSquare = time 
		drawSquare()
	}
	
	requestAnimationFrame(rafSquare)
}

let lastTimeCircle = 0 
function rafCircle() {
	let time = Date.now()
	let elapsed = time - lastTimeCircle
	if (elapsed > 20) {
		lastTimeCircle = time 
		drawCircle()
	}

	requestAnimationFrame(drawCircle)
}

let lastTimePath = 0 
function rafPath() {
	let time = Date.now()
	let elapsed = time - lastTimePath
	if (elapsed > 20) {
		lastTimePath = time 
		drawPath()
	}

	requestAnimationFrame(drawPath)
}

Test runner

requestAnimationFrame(rafSingle)

requestAnimationFrame(rafSquare)
requestAnimationFrame(rafCircle)
requestAnimationFrame(rafPath)

Revisions

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

• Revision 1: published on March 11, 2024