Html over the Canvas?

Question

Can someone clear up some some confusion on my part.

Is it possible to have html over the top of a canvas? I keep reading that you can't have GUI elements such as Jquery with Canvas, but then I read you can have HTML over the canvas, why can you have one but not the other?

What I ideally want eventually is a good GUI over the top of my canvas, so just need to know what's possible and what isn't.

Answer 1

Sure - you can put the HTML "on top" of the canvas by using absolute positioning.

http://jsfiddle.net/stevendwood/5sSWj/

You cannot have HTML "in" the canvas. But supposing that the canvas and the HTML use the same coordinates then you can use top and left to position elements in the canvas using the same offsets as you draw with.

#picture {
    position: relative;
}

.blob, .blob1, .blob2 {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 20px;
    background-color: green;
    border: 2px solid #ccc;
}


var canvas = document.querySelector('canvas'),
    context = canvas.getContext('2d');

context.beginPath();
context.moveTo(100, 150);
context.lineTo(350, 50);
context.stroke();

And the HTML...

<div id="picture">
    <canvas id="canvas" width="500" height="500">
    </canvas>
    <div class="blob1"></div>
    <div class="blob2"></div>
</div>

In this fetching example you can connect two positioned divs with a line drawn on a canvas element that is underneath them.