Using HTML5 to Catch a Snake - Learn HTML5 by Creating Fun Games - page 196

There is also another version of the same function, which takes into account, scaling
from source to destination. In the case above, the source image is larger than the
canvas. Instead of resizing the image using a photo editing software program, we
can instead tell the canvas to draw the whole image into a smaller area of the can-
vas. The scaling is done by the canvas automatically. We could also draw the image
into a larger area than the image itself, but doing so will result in pixilation depending
on how much we scale the image.
The parameters for this function are the source image, the source x and y coordin-
ates (in other words, where to start sampling the source image relative to the image
itself), the source width and height (in other words, how much to sample the source
image), and the destination x and y, followed by width and height.
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
var img = new Image();
img.onload = function(){
ctx.drawImage(img,
// Sample part of the upper left corner
of the source image
35, 60, this.width / 2, this.height / 2,
// And draw it onto the entire canvas,
even if it distorts the image
0, 0, canvas.width, canvas.height);
};
img.src = "img/html5-logo.png";