Single RAF draw calls vs Multiple RAF draw calls

Benchmark created by Brendon on August 5, 2014

Description

Setup

var canvas = document.createElement('canvas'),
                    ctx = canvas.getContext('2d'),
                    PI2 = Math.PI * 2,
                    delayDraw = 250,
                    time;
    
                function drawLines() {
                    ctx.beginPath();
                    ctx.moveTo(10, 10);
                    ctx.lineTo(50, 50);
                    ctx.stroke();
                    ctx.closePath();
                }
    
                function drawCircle() {
                    ctx.beginPath();
                    ctx.arc(30, 30, 25, 0, PI2, false);
                    ctx.fillStyle = 'blue';
                    ctx.fill();
                    ctx.closePath();
                }
    
                function drawRect() {
                    ctx.fillStyle = 'red';
                    ctx.fillRect(60, 60, 50, 70);
                }
    
                function timeStamp() {
                  return window.performance && window.performance.now ? window.performance.now() : new Date().getTime();
                }
    
                function frame() {
                        drawCircle();
                        drawLines();
                        drawRect();
                }
    
                function render() {
                        if (timeStamp() >= (time || timeStamp())) {
                                time = timeStamp() + delayDraw;
                                frame();
                        } 
                        requestAnimationFrame(render);
                }
    
                function render1() {
                        if (timeStamp() >= (time || timeStamp())) {
                                time = timeStamp() + delayDraw;
                                drawCircle();
                        } 
                        requestAnimationFrame(render1);
                }
    
                function render2() {
                        if (timeStamp() >= (time || timeStamp())) {
                                time = timeStamp() + delayDraw;
                                drawRect();
                        } 
                        requestAnimationFrame(render2);
                }
    
                function render3() {
                        if (timeStamp() >= (time || timeStamp())) {
                                time = timeStamp() + delayDraw;
                                drawLines();
                        } 
                        requestAnimationFrame(render3);
                }

Teardown

    if (render) requestAnimationFrame(render, canvas);  
    if (render1) requestAnimationFrame(render1, canvas);                
    if (render2) requestAnimationFrame(render2, canvas);
    if (render3) requestAnimationFrame(render3, canvas);
  

Test runner

requestAnimationFrame(render, canvas);

requestAnimationFrame(render1, canvas);         
requestAnimationFrame(render2, canvas);
requestAnimationFrame(render3, canvas);

Revisions

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

• Revision 1: published by Brendon on August 5, 2014