Generating Images In HTML5 Canvas

I am experimenting with canvas and I am having some trouble. Please see this codepen: http://codepen.io/JonnyBoggon/pen/YGgKqQ I would like to generate two (or more potentially) fl

Solution 1:

To load and render images using canvas 2D

Create and load image

Create an new Image object, assign the src the URL of the image you wish to load. The image will then begin to load. You will not be able to know how long the image may take to load so you need to either wait until the image fires the onload event or if you are sure that the resource will always be available only use the image if its complete property is === true

As I do not know if your images resource is reliable the code below is a mix of the above method, using the onload event to flag that the image has loaded.

var image = new Image(); // a new image object same as <img> tag
image.src = "imageURL";  // the url pointing to the image 
image.onload = function(){ this.ready = true; };  // flag image ready
                                                  // This will not happen until
                                                  // the current code has exited

Draw an image onto the canvas.

To render the image use the 2D context function drawImage. This function has up to 9 arguments many of which are optional. For full details see MDN drawImage.

If you try to render the image before it has loaded then you will of course not see anything. If the image has an error during loading attempting to draw it may throw an error and stop your code from running. So always be sure your image is ready and safe to draw.

From the above image load snippet the following snippet renders the image

if(image.ready){   // is it ready
    ctx.drawImage(image,x,y);  // draw image with top left at x,y
}

Loading many images.

It is inefficient to check the image for ready each time you render it. Once ready it is always so. This answer shows how you can load many images. If you have an ongoing animation instead of calling the drawImages function when all images have loaded, call a function that starts the animation, or set a flag to indicate that all images have loaded and are safe to render.

A complete image render function.

The 2D API allows you to draw an image that is scaled, rotated, fade in/out. Rendering a image like this is sometimes called a sprite (From the old 16bit days)

Function to draw a scaled rotated faded image / sprite with the rotation around its center. x and y are the position on the canvas where the center will be. scale is 1 for no scale <1 for smaller, and >1 for larger. rot is the rotation with 0 being no rotation. Math.PI is 180 deg. Increasing rot will rotate in a clockwise direction decreasing will rotate the other way. alpha will set how transparent the image will be with 0 being invisible and 1 as fully visible. Trying to set global alpha with a value outside 0-1 range will result in no change. The code below does a check to ensure that alpha is clamped. If you trust the alpha value you can set globalAlpha directly

function drawSprite(image,x,y,scale,rot,alpha){
     ctx.setTransform(scale,0,0,scale,x,y);
     ctx.rotate(rot);
     ctx.globalAlpha = alpha < 0 ? 0 : alpha > 1 ? 1 : alpha; // if you may have 
                                                              // alpha values outside
                                                              // the normal range
     ctx.drawImage(image,-image.width / 2, -image.height / 2);
}
// usage
drawSprite(image,x,y,1,0,1); // draws image without rotation or scale
drawSprite(image,x,y,0.5,Math.PI/2,0.5); // draws image rotated 90 deg
                                         // scaled to half its size
                                         // and semi transparent

The function leaves the current transform and alpha as is. If you render elsewhere (not using this function) you need to reset the current state of the 2D context.

To default

ctx.setTransform(1,0,0,1,0,0);
ctx.globalAlpha = 1;

To keep the current state use

ctx.save();
// draw all the sprites
ctx.restore();