HTML5 Canvas scaling an image animation

Question

I've created a straight forward linear HTML5 animation but I now want the image to continuously scale bigger then smaller until the end of the canvas' height.

What's the best way to do this?

Here's a JSFIDDLE

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.oRequestAnimationFrame;

var canvas = document.getElementById('monopoly-piece');
var context = canvas.getContext('2d');

var img = document.createElement("img");
img.src = "images/tophat.png";
img.shadowBlur = 15;
img.shadowColor = "rgb(0, 0, 0)";

var xSpeed = 0;  //px per ms
var ySpeed = 0.15;

function animate(nowTime, lastTime, xPos, yPos) {
    // update
    if ((img.style.height + yPos) > canvas.height) {
        xPos = 0;
        yPos = 0;
    }
    var timeDelta = nowTime - lastTime;
    var xDelta = xSpeed * timeDelta;
    var yDelta = ySpeed * timeDelta;

    // clear
    context.clearRect(0, 0, canvas.width, canvas.height);

    // shadow
    context.shadowOffsetX = 3;
    context.shadowOffsetY = 7;
    context.shadowBlur    = 4;
    context.shadowColor   = 'rgba(0, 0, 0, 0.4)';

    //draw img
    context.drawImage(img, xPos, yPos);

    if (yPos > canvas.height - img.height ) {
        addMarker();
    }
    else {
        requestAnimationFrame(
                function(timestamp){
                    animate(timestamp, nowTime, xPos + xDelta, yPos + yDelta);
                }
            );
        }

}

animate(0, 0, -10, 0);

Here is my current code which animates an image from the top of the canvas element to the bottom and then stops.

Thanks.

Answer 1

context.DrawImage has additional parameters that let you scale your image to your needs:

// var scale is the scaling factor to apply between 0.00 and 1.00
// scale=0.50 will draw the image half-sized

var scale=0.50;

// var y is the top position on the canvas where you want to drawImage your image

var y=0;

context.drawImage(

    // draw img
    img,

    // clip a rectangular portion from img
    // starting at [top,left]=[0,0]
    // and with width,height == img.width,img.height
    0, 0, img.width, img.height,

    // draw that clipped portion of of img on the canvas
    // at [top,left]=[0,y]
    // with width scaled to img.width*scale
    // and height scaled to img.height*scale

    0, y, img.width*scale, img.height*scale

)

Here's an example you can start with and fit to your own design needs:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;

var scale = 1;
var scaleDirection = 1
var iw, ih;
var y = 1;
var yIncrement = ch / 200;

var img = new Image();
img.onload = start;
img.src = "https://dl.dropboxusercontent.com/u/139992952/multple/sun.png";

function start() {
  iw = img.width;
  ih = img.height;
  requestAnimationFrame(animate);
}


function animate(time) {

  if (scale > 0) {
    requestAnimationFrame(animate);
  }

  ctx.clearRect(0, 0, cw, ch);
  ctx.drawImage(img, 0, 0, iw, ih, 0, y, iw * scale / 100, ih * scale / 100);

  scale += scaleDirection;
  if (scale > 100) {
    scale = 100;
    scaleDirection *= -1;
  }
  y += yIncrement;
}



$("#test").click(function() {
  scale = y = scaleDirection = 1;
  requestAnimationFrame(animate);
});

body{ background-color: ivory; }
canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="test">Animate Again</button>
<br>
<canvas id="canvas" width=80 height=250></canvas>