HTML5 Canvas - Grouping / Attaching An Image TO A Canvas

Using this JS Fiddle I am able to press a button to add new canvases to the screen... var next = 4 function addCanvas() { // create a new canvas element var ne

Solution 1:

Here's taking @KaliedaRik's answer and creating your groups using javascript:

http://jsfiddle.net/m1erickson/3EUnc/

The code to create a new group could be something like this:

function newGroup(){

    // create a new wrapper div
    var div=document.createElement("div");
    div.className="wrapper";

    // create an img and a canvas element

    var img=document.createElement("img");
    var br=document.createElement("br");
    img.style.width="50px";
    img.src="houseicon.png";
    var canvas=document.createElement("canvas");
    canvas.width=300;
    canvas.height=55;

    // add the img and canvas elements to the wrapper div

    div.appendChild(img);
    div.appendChild(br);
    div.appendChild(canvas);

    // add the wrapper div with its contained img + canvas to the page

    document.body.appendChild(div);

}

Solution 2:

One possible solution: when you create the canvas element, create a new div at the same time and put the canvas and img tags inside it. By making the div position style relative and the contained canvas and img position styles absolute, you'll be able to place the image wherever it needs to go.

<div style="position: relative">
    <canvas style="position: absolute; top: 0px; left: 0px;"></canvas>
    <img src="whatever" alt="whatever" style="position: absolute; top: -20px; left: 0px" />
</div>