Scaling an Image using the Canvas Element
In this example we show how to scale an image around its center point in HTML5. Like the Simple Animation example we create a javascript loop and draw our image each iteration.
<body onload="drawCanvas();">
<div>
<canvas id="myCanvas" width="150" height="150">
<p>Your browser doesn't support canvas.</p>
</canvas>
</div>
</body>
What we want to do here is animate a scale value up and down, with the lowest value being 0.2 and the highest 2.0. What we do is specify a scale direction value and increment/decrement this in our main loop.
var surface;
var happy;
var x = 50;
var y = 50;
var scale = 0;
var scaleDirection = 0.2;
function drawCanvas() {
// Get our Canvas element
surface = document.getElementById("myCanvas");
if (surface.getContext) {
// If Canvas is supported, load the image
happy = new Image();
happy.onload = loadingComplete;
happy.src = "images/happy.png";
}
}
function loadingComplete(e) {
// When the image has loaded begin the loop
setInterval(loop, 25);
}
function loop() {
// Each loop we scale the image
// Grab the context
var surfaceContext = surface.getContext('2d');
// Clear the canvas to White
surfaceContext.fillStyle = "rgb(255,255,255)";
surfaceContext.fillRect(0, 0, surface.width, surface.height);
// Save the current context
surfaceContext.save();
// Translate to the center point of our image
surfaceContext.translate(x + happy.width * 0.5, y + happy.height * 0.5);
// Perform the scale
surfaceContext.scale(scale, scale);
// Translate back to the top left of our image
surfaceContext.translate(-happy.width * 0.5, -happy.height * 0.5);
// Finally we draw the image
surfaceContext.drawImage(happy, 0, 0);
// And restore the context ready for the next loop
surfaceContext.restore();
// Animate our scale value
scale += scaleDirection;
if (scale < 0.2 || scale > 2) {
scaleDirection = -scaleDirection;
}
}
In the code above, like the rotation example, we want to scale around the image center point. To do this we first translate the image to its center point and then perform the scale command before transforming it back to it top-left point before rendering.
Here is the completed example:
