Html Over The Canvas?

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 Canva

Solution 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:2pxsolid#ccc;
}


varcanvas=document.querySelector('canvas'),context=canvas.getContext('2d');context.beginPath();context.moveTo(100,150);context.lineTo(350,50);context.stroke();

And the HTML...

<divid="picture"><canvasid="canvas"width="500"height="500"></canvas><divclass="blob1"></div><divclass="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.

Solution 2:

The canvas element is no different than any other dom element, so you can place any dom element on top of a canvas element.

jQuery is just a means to manipulate the DOM, so of course you can use jQuery for the GUI. What you cannot do is use jQuery to manipulate the contents of the canvas itself (the pixel data), maybe that's what the confusion is about.

Solution 3:

You can place an element above canvas with position:absolute; for any HTML element that you need to place above the canvas. Hope this helps.