I want to know how to use canvas image-rendering feature in HTML5. I tried this:
var renderToCanvas = function (width, height, renderFunction) {
var buffer = document.createElement('canvas');
buffer.width = width;
buffer.height = height;
renderFunction(buffer.getContext('2d'));
return buffer;
};
Loading
Jaganathan BantheswaranPosted Jul 21, 2011, 2:39 AM
Code sample here,
The drawImage() method can be used to draw an image on a canvas at a specific position (x,y). If you simply want to draw the image on the canvas without any scaling or tranformation, then you need to pass only 3 parameters to the method drawImage.
drawImage(Image, x coordinate, y coordinate)
First, create a new image object within your javascript function. Provide the source directory of the image. It is important to make sure that the image is loaded before you draw it on the canvas using the drawImage function. Using the 'drawImage' function within 'onload' will take care of this.