CODEWITHSUNDEEP
htmlcanvas
LostMohican
LostMohican

Reputation: 3144

html5 div inside a context of canvas

I started using html5 canvas object on my web site and I want to draw rectangles (or other shapes according to my application) on the canvas. I can write text on the rectangles using the context object.

What I am trying to do is that I want to put a div element in the rectangle. So I can semantically work with my objects on the canvas like put a paragraph and a border inside the rectangle etc., storing some trivial data in the objects. Is that possible?

Upvotes: 4

Views: 7656

Answers (2)

Bergi
Bergi

Reputation: 664185

Older Browser not supporting canvas should show those divs. As you can easily try out, other browsers will store the div in your dom tree, but not show it. So you should be able to do some dom semantics, but you'll have to paint them on your canvas for browsers supporting it.

If you want to show the divs and paint onto them using canvas, you'll have to use positioning to show them over each other.

Upvotes: 2

Garrett Vlieger
Garrett Vlieger

Reputation: 9494

Nothing goes inside the canvas tag except for elements that would be displayed if the browser doesn't support HTML5 and canvas. If you want to display regular HTML elements in a DIV, you could simply position it absolutely so that it floats above the canvas:

<canvas height="100" width="200" style="position:absolute;left:10;top:10"></canvas>

<div id="yourDiv" style="position:absolute;left:20;top:20">Your content</div>

Hopefully this helps.

Upvotes: 6

Related Questions