CODEWITHSUNDEEP
jqueryhtmlcss
user3821544
user3821544

Reputation: 159

Overlay canvas on a div with css

On my website there is a <div> with some css styled rings in it. It's like the android unlock pattern. 9 dots which can be connected in different ways. I want to overlay a canvas on this, so that I can measure the drawing the user makes and color in the touched dots accordingly. What's the best way to overlay this?

Upvotes: 0

Views: 1266

Answers (2)

DevDonkey
DevDonkey

Reputation: 4880

2 ways as far as I can see

1) use another nested div with a no background set so its transparent. Then inherit the parents dimensions in the CSS

<div id='rings'>
   <div id='overlay'>

   </div>
</div>

css- #rings { width: 200px; height: 200px; }

 #rings div#overlay
 {
    width: inherit;
    height: inherit;
 }

2) or create a seperate, absolutely positioned DIV and use z-index in the CSS to overlay it

<div id='rings'>

</div>

<div id='overlay'>

</div>

Upvotes: 1

Freeman Lambda
Freeman Lambda

Reputation: 3655

Set { position: relative; } to your div, and { position: absolute; } to your canvas. Make sure your canvas is a child element of your div. Next, give your canvas the same size as your div, and there you have a canvas overlay where you can draw everything. By the way, canvases have transparent background by default, so it's like putting a transparent plastic paper on top of your div, where you can draw all your graphics ( lines like in android i suppose. As for the circles, you can style those by css.

Upvotes: 2

Related Questions