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.
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.
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.
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.
