I wanted to draw on a Canvas which is on top of another control and also able to access the control, is this possible in HTML?

I have an use case to draw lines/shapes using Canvas or SVG APIs, These graphics will be drawn on a layer which is on top of a set of controls. The issue I have now is, Once the Canvas is placed on top of the controls, I am not able to a开发者_开发知识库ccess the controls, like clicking on a checkbox/button etc. How can I enable this ?

eg

<div>
   <div id="layer1" style="position:absolute;top:0px;left:10px">
         <input type="submit"/>
    </div>
    <canvas id="layer2" style="position:absolute;top:0px;left:10px"></canvas>
</div>

In the above sample, I am not able to click on the "submit" button because of the layer on top, What I wanted to do is to draw circle around the button, same time I should be able to click on the button as well.

Is this possible in HTML ?

Typically you can't click "through" HTML elments, but you still have a lot of options.

One very quick solution is to use pointer-events: none; in your style code for the canvas.

This will work on Firefox/chrome/safari, but not IE.

For IE you'll have to get more clever.

...But why not just put the button on top instead of having the canvas on top? A quick way to do this is to give the canvas z-index: -1; in its style.

So all together now:

<div>
   <div id="layer1" style="position:absolute;top:0px;left:10px">
         <input type="submit"/>
    </div>
    <canvas id="layer2" style="position:absolute;top:0px;left:10px; border: 1px solid black; pointer-events: none; z-index: -1;"></canvas>
</div>