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:

Your browser doesn't support canvas.

Post your Comments

 
Latest Games
Zombie Escape
Apr 19, 2016
Plays: 1,404

Zombie Escape ScreenshotDrive fast before the crazy mutant zombies get you!

6 Ratings/4.1 Average
Car Parking
Jan 16, 2016
Plays: 1,371

Car Parking ScreenshotGuide the car to its parking space in this fun Car Parking game.

1 Rating/5 Average
Trash It
Jan 11, 2016
Plays: 1,257

Trash It ScreenshotAim for the Trash Can and get the various items of Trash in the bin.

4 Ratings/5 Average
Sky Fly
Jan 11, 2016
Plays: 1,377

Sky Fly ScreenshotFly your plane in this colorful vertical scrolling shoot-em-up. Blast the bad guys and collect any bonus's they leave behind.

1 Rating/5 Average
Professor Snappy
Jan 11, 2016
Plays: 1,010

Professor Snappy ScreenshotPop as many bubbles as possible in this fun and colorful bubble popping game. The levels start off easy enough but gradually get harder!

1 Rating/5 Average
Monster Match Saga
Jan 10, 2016
Plays: 1,342

Monster Match Saga ScreenshotHere we have a bunch of monsters that need to be matched up. Look out for the bomb and spinning monsters that will cause special damage!

3 Ratings/4.6 Average
Fly Bird Fly
Jan 10, 2016
Plays: 1,063

Fly Bird Fly ScreenshotGuide your friendly Bird through the maze of pipes and other obstacles collecting the Stars in this cool arcade game inspired by the legendary Flappy Bird.

1 Rating/5 Average
Life In One
Jan 10, 2016
Plays: 1,258

Life In One ScreenshotYou are stranded on an Alien planet. Your goal is to build a space rocket and escape. Start by building units to create power and mine the metal patches. Build defenses to defend your base from the advancing Aliens and Zombies!

2 Ratings/3 Average
X Pool
Jan 02, 2016
Plays: 1,761

X Pool ScreenshotPlay Pool against the computer or battle against your friends in the online mode!

3 Ratings/3 Average
Fruit Slicer
Jan 02, 2016
Plays: 1,022

Fruit Slicer ScreenshotSlice the fruit that is thrown up onto the screen. Slice the fruit into multiple pieces for maximum points!

1 Rating/5 Average