cost of canvas transforms

Benchmark created on October 25, 2013

Description

Preparation HTML

source image:<br/>
<canvas id="sourceImg" width="64" height="64"></canvas>
<br/><br/>destination canvas:<br/>
<canvas id="drawHere" width="128" height="128"></canvas>

<script>
var sourceCanvas = document.getElementById('sourceImg');
var sourceCtx = sourceCanvas.getContext('2d');
sourceCtx.beginPath();
sourceCtx.arc(32,32,32,0,Math.PI);
sourceCtx.fill();
sourceCtx.beginPath();
sourceCtx.fillStyle = "red";
sourceCtx.arc(32,32,32,Math.PI,0);
sourceCtx.fill();
var drawCanvas = document.getElementById('drawHere');
var drawCtx = drawCanvas.getContext('2d');

function drawNormal(){
drawCtx.drawImage(sourceCanvas,0,0);
}
function drawNormalWithState(){
drawCtx.save();
drawCtx.drawImage(sourceCanvas,0,0);
drawCtx.restore();
}
function drawRotate(){
drawCtx.save();
drawCtx.rotate(Math.PI/4);
drawCtx.drawImage(sourceCanvas,0,0);
drawCtx.restore();
}
function drawScale(){
drawCtx.save();
drawCtx.scale(1.5,1.5);
drawCtx.drawImage(sourceCanvas,0,0);
drawCtx.restore();
}
function drawScaleAndRotate(){
drawCtx.save();
drawCtx.scale(1.5,1.5);
drawCtx.rotate(Math.PI/4);
drawCtx.drawImage(sourceCanvas,0,0);
drawCtx.restore();
}
function drawAlpha(){
drawCtx.save();
drawCtx.globalAlpha = 0.5;
drawCtx.drawImage(sourceCanvas,0,0);
drawCtx.restore();
}
function drawAlphaAndRotate(){
drawCtx.save();
drawCtx.globalAlpha = 0.5;
drawCtx.rotate(Math.PI/4);
drawCtx.drawImage(sourceCanvas,0,0);
drawCtx.restore();
}
</script>

Setup

drawCtx.clearRect(0,0,128,128);

Test runner

drawNormal();

drawNormalWithState();

drawRotate();

drawScale();

drawScaleAndRotate();

drawAlpha();

drawAlphaAndRotate();

Revisions

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

• Revision 1: published on October 25, 2013