multiple canvases are not working

Question

I tried to generate multiple canvases on the fly and when I create a new canvas, the previous one disappears. See here for an example:

http://jsfiddle.net/adrianh/5jspv/4/

Here is the javascript code:

var circleCount = 0;
function circleRect(rect)
{
    var diameter = Math.sqrt(rect.width*rect.width+rect.height*rect.height);
    var cx = (rect.right + rect.left)/2;
    var cy = (rect.top + rect.bottom)/2;
    var left = Math.floor(cx - diameter/2);
    var top  = Math.floor(cy - diameter/2);
    diameter = Math.floor(diameter);
    var html = "<canvas id='circleCanvas"+circleCount+"' "+
        "width='"+(diameter+2)+"' "+
        "height='"+(diameter+2)+"' "+
        "style='"+
        "position:absolute;"+
        "z-index:0;"+
        "left:"+(left-1)+"px;"+
        "top:"+(top-1)+"px;"+
        //"border:1px solid;"+
        "' />";
    alert(html);
    var container = document.getElementById("circles");
    container.innerHTML += html;

    var c=document.getElementById("circleCanvas"+circleCount);
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.arc(diameter/2+1,diameter/2+1,diameter/2,0,2*Math.PI);
    ctx.stroke();
    ++circleCount;
}

$(".circled").each(function(i, obj) {
    var rect = obj.getBoundingClientRect();
    circleRect(rect);
});

Why is only one canvas showing up?

Answer 1

It will be more reliable to manipulate the DOM rather than trying to inline things with innerHTML . This code uses jQuery's DOM manipulation methods :

var circleCount = 0;
function circleRect(rect)
{
    var diameter = Math.sqrt(rect.width*rect.width+rect.height*rect.height);
    var cx = (rect.right + rect.left)/2;
    var cy = (rect.top + rect.bottom)/2;
    var left = Math.floor(cx - diameter/2);
    var top  = Math.floor(cy - diameter/2);
    diameter = Math.floor(diameter);
    var html = $("<canvas id='circleCanvas"+circleCount+"' "+
        "width='"+(diameter+2)+"' "+
        "height='"+(diameter+2)+"' "+
        "style='"+
        "position:absolute;"+
        "z-index:0;"+
        "left:"+(left-1)+"px;"+
        "top:"+(top-1)+"px;"+
        "' />");
    $("#circles").append(html);

    var ctx=html[0].getContext("2d");
    ctx.beginPath();
    ctx.arc(diameter/2+1,diameter/2+1,diameter/2,0,2*Math.PI);
    ctx.stroke();
    ++circleCount;
}

You could also use the standard createElement and appendChild if you don't really need jQuery.

The innerHTML property has a number of drawbacks , although there is nothing specific I can find about not using += with it, the fact that insertAdjacentHTML exists would seem to indicate that you shouldn't really expect it to work well. (forgot this bit earlier) In this case, as you correctly surmised in your comment, the canvas you've drawn on is replaced by a new one when the assignment to innerHTML happens.