Canvas image

http://tech.pro/tutorial/1073/html-5-canvas-tutorial-displaying-images

The Canvas element was introduced a few years ago as part of the HTML 5 standard. This element has opened the doors to incredibly dynamic web applications that in the past were only possible using 3rd party plugins like Flash or Java. This tutorial covers a small but important piece of the canvas element - displaying and manipulating images.

Image Source

The most common way to draw images to a canvas element is to use a Javascript Image object. Which image formats are supported is dependent on the browser, however the typical formats (png, jpg, gif, etc) have very good cross-browser support.

The image can either be grabbed from an existing element already in the DOM or a new one can be constructed on demand.

// Grab an image that's already on the page.
var myImage = document.getElementById('myimageid');

// or create a new image.
myImage = new Image();
myImage.src = 'image.png';

In the current version of most canvas-supported browsers, drawing an image that hasn't been fully loaded simply doesn't do anything. This means, however, that if you want the image to show up, you must wait for it to be loaded before drawing it. This can be done by using the Image object's onload function.
// Create an image.
myImage = new Image();
myImage.onload = function() {
  // Draw image.
}
myImage.src = 'image.png';

For the rest of my examples, the source image I'll be using is the following 256x256 gorilla.



Basic Drawing

For the most basic form of drawing images, all that's required is the position (x and y coordinates) of where you'd like to put the image. Images are positioned relative to their top-left corners. With this technique, images are simply displayed at their original size.
drawImage(image, x, y)

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

ctx.drawImage(myImage, 50, 50);
ctx.drawImage(myImage, 125, 125);
ctx.drawImage(myImage, 210, 210);



Resizing and Scaling

To change the size of the image, an overloaded version of drawImage is used that accepts the desired width and height.
drawImage(image, x, y, width, height)

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

ctx.drawImage(myImage, 50, 50, 100, 100);
ctx.drawImage(myImage, 125, 125, 200, 50);
ctx.drawImage(myImage, 210, 210, 500, 500);

This example demonstrates drawing an image smaller than the source, stretched to a different aspect ratio, and blown up larger than the source.



Slice and Crop

The last variant of drawImage allows you to take a slice out of (or crop) the source image.
drawImage(image, 
  sourceX, 
  sourceY, 
  sourceWidth, 
  sourceHeight, 
  destX, 
  destY, 
  destWidth, 
  destHeight)

There's a lot of parameters there, but basically you're taking a rectangle out of the source image and drawing that rectangle into a destination rectangle somewhere on the canvas.


var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

ctx.drawImage(myImage, 0, 0, 50, 50, 25, 25, 100, 100);
ctx.drawImage(myImage, 125, 125, 100, 100, 125, 125, 150, 150);
ctx.drawImage(myImage, 80, 80, 100, 100, 250, 250, 220, 220);



That does it for all the basic ways to draw and manipulate images using the HTML 5 canvas. Drawing images is a small part of what the canvas provides, and we'll be posting more tutorials in the future that covers more of this element and its features.