Canvas image-rendering feature in HTML5

Question

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;
};

Jaganathan Bantheswaran · Answer

Hi, Code sample here, function init() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); // Create a new image object. var flower = new Image(); //Provide the source directory of the image you are about to upload. flower.src = "flower.png"; // Make sure the image is loaded before you draw it on the canvas. flower.onload = function() { // Draw the image at location (0,0) on the canvas. ctx.drawImage(flower, 10, 10); } } } 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.

Canvas image-rendering feature in HTML5

Answers (1)