Sunday, May 19, 2024
 Popular · Latest · Hot · Upcoming
172
rated 0 times [  178] [ 6]  / answers: 1 / hits: 27086  / 11 Years ago, thu, may 16, 2013, 12:00:00

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.


More From » html

 Answers
25

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.


[#78195] Wednesday, May 15, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
bryonk

Total Points: 161
Total Questions: 116
Total Answers: 107

Location: Albania
Member since Sun, Nov 22, 2020
4 Years ago
bryonk questions
;