javascript - HTML5 Canvas scaling an image animation -

I made a straight forward linear HTML5 animation, but now I want the image to be large scale Scale at the height of the canvas.

What is the best way to do this?

This is a

  window.request animationframe = window. Request animationframe || Window.mozRequestAnimationFrame || Window.webkitRequestAnimationFrame || Window.oRequestAnimationFrame; Var canvas = document. GetElementById ('monopoly-piece'); Var reference = canvas.getContext ('2d'); Var img = document.createElement ("img"); Img.src = "picture / tophat.png"; Img.shadowBlur = 15; Img.shadowColor = "RGB (0, 0, 0)"; Var xSpeed ​​= 0; // px per MS var ySpeed ​​= 0.15; Function Animate (now time, last time, xps, yPos) {// Update if ((img.style.height + yPos)> canvas.hete} {xPos = 0; YPos = 0; } Var timeDelta = nowTime - the last time; Var xDelta = xSpeed ​​* timeDelta; Var yDelta = ySpeed ​​* timeDelta; // Clear Reference Pure Line (0, 0, Canvas. Wide, Canvas. Height); // Shadow reference. 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, Abantime, Expos + ExDlata, yPos + yDelta);}); }} Chetan (0, 0, -10, 0);   
 This is my current code that animates an image from the top of the canvas element on the bottom and then closes.  
 Thank you.   
 
 
  context.DrawImage  has additional parameters that let you view your images Increase according to the requirements:  
  // var is the scaling factor to apply between scale, 0.00 and 1.00 // scale = 0.50 image half-sized var scale = 0.50; // var y is the top spot on the canvas where you want to paint your image var y = 0; Context.drawImage (// draw img img, // img a rectangular part of clip / start [top, left] = [0,0] // and with width, height == img.width, img.height 0, 0, img.width, img.height, // draw the cut portion of the IMG on the canvas / with the width scaled for [top, left] = [0, y] // img.width * scale // // and height reached img.height * scale 0, y, img.width * scale, img.height * scale   
 Here's an example that you can use to design your own You can start and fit with the requirements:  
  
 
 
  var canvas = Document. GetElementById ("canvas"); Var ctx = canvas.getContext ("2D"); Var cw = canvas.width; Var ch = canvas height; Var Scale = 1; Var Scale Direction = 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"; Start function () {iw = img.width; Aih = IMG height; RequestAnimationFrame (animate); } Function animate (time) {if (scale> gt;) {requestAnimationFrame (animate); } Ctx.clearRect (0, 0, cw, ch); Ctx.drawImage (IMG, 0, 0, IEW, IH, 0, Y, IW * Scale / 100, IH * Scale / 100); Scale + = scale direction; If (scale> 100) {scale = 100; Scale Direction * = -1; } Y + = yIncrement; } $ ("#search"). Click (function () {scale = y = scaleDirection = 1; requestAnimationFrame (animate);});   
  body {background color: ivory; } Canvas {boundary: 1 px solid red;}   
  & lt; Script src = "https: // ajax .googleapis.com / ajax / libs / jQuery / 1.9.1 / jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Button id = "test" & gt; Animate & lt; / Button & gt; & Lt; Br> & Lt; Canvas id = "canvas" width = 80 height = 250> gt; & Lt; / Canvas & gt;