faster to scale up or down

Benchmark created on October 26, 2013

Preparation HTML

source images:<br/>
<canvas id="sourceBig" width="361" height="361"></canvas>
<canvas id="sourceSmall" width="100" height="100"></canvas>
<br/><br/>destination canvas:<br/>
<canvas id="drawHere" width="190" height="190"></canvas>

<script>
var sourceBigCanvas = document.getElementById('sourceBig');
var sourceBigCtx = sourceBigCanvas.getContext('2d');
sourceBigCtx.beginPath();
sourceBigCtx.moveTo(0,361);
sourceBigCtx.lineTo(361,0);
sourceBigCtx.lineTo(361,361);
sourceBigCtx.fillStyle = "red";
sourceBigCtx.fill();

var sourceSmallCanvas = document.getElementById('sourceSmall');
var sourceSmallCtx = sourceSmallCanvas.getContext('2d');
sourceSmallCtx.beginPath();
sourceSmallCtx.moveTo(0,100);
sourceSmallCtx.lineTo(100,0);
sourceSmallCtx.lineTo(100,100);
sourceSmallCtx.fillStyle = "red";
sourceSmallCtx.fill();

var drawCanvas = document.getElementById('drawHere');
var drawCtx = drawCanvas.getContext('2d');

function drawGrown(){
drawCtx.save();
drawCtx.scale(1.9,1.9);
drawCtx.drawImage(sourceSmallCanvas,0,0);
drawCtx.restore();
}
function drawShrunk(){
drawCtx.save();
drawCtx.scale(1/1.9,1/1.9);
drawCtx.drawImage(sourceBigCanvas,0,0);
drawCtx.restore();
}
</script>

Setup

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

Test runner

drawGrown();

drawShrunk();

Revisions

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

• Revision 1: published on October 26, 2013