Question

What is best practice? Should I make a separate canvas tag for each image in html5, or is it just as functional to put multiple images in one canvas, and how would I do that.

My Code so far:

var canvas = document.getElementById("e");
var context = canvas.getContext("2d");

var cat = new Image();
cat.src = "images/cartoonPaul01.jpg";
cat.onload = function() {
    context.drawImage(cat, 0, 0, 169, 207);
};

Answer 1

You can do this dynamically, if you’re so inclined. muro from deviant art uses a few base canvases – temp, buffer, and background. Then you dynamically create and delete layers using a control on the side. It depends largely on what you want to do.

If you are just printing to the canvas, and you don’t need to necessarily alter the images in a way that needs dynamism, you can draw them all to one canvas. If you need layering, use it.

Dynamic canvas and context creation:

// This is not best practice, just an example using globals.
var layers = [];
var lyrCtx = [];

createLayer = function() {
  // Create the canvas.
  layers.push(document.createElement('canvas'));
  layers[layers.length - 1].setAttribute('id', 'layer'+layers.length-1);

  // Create the context. Provided you do it in order, lyrCtx[i] should correlate to layers[i]
  lyrCtx.push(layers[layers.length - 1].getContext("2d"));

  // Handle context settings here.
}