HTML canvas usage in IE9, with z-index property
Note: This question is not about the usual z-index bug that is referenced all over the web. The z-index property is correctly taken into account for the display.
Hi,
I have designed a javascript-based drawing interface for a web site. It generates a transparent canvas on top of an existing page, and allows to draw on it with the mouse pointer to capture information.
So within m开发者_高级运维y javascript code I dynamically create this canvas and associate a high z-index to it, to put it to the forefront.
My solution is already working on the non-internet-explorer web browsers. The beta version of Internet Explorer 9 now supports canvas, so I updated my code to be IE9-compatible.
Now there is my issue: On IE9 the transparent canvas is correctly displayed on top of the page, and I can draw on it. But when my mouse pointer moves on top of an other html element, then it changes and the mouse events are no more captured on the canvas. For instance when moving on top of a text field, the mouse cursor changes from the 'default' pointer to the 'text' pointer and when clicking I select the text instead of drawing.
I have tried to set the opacity to 1 in case it was an opacity bug, but even if the text field is not visible, it remains clickable.
Has anyone already faced such an issue ? I guess it is the flaw of using the beta version of a product ;-)
Thanks. Pierre
I finally could solve my issue. This is not an IE9 issue but a global Internet Explorer issue.
The explanation is that the canvas is windoless element whereas my text elements are windowed. To disable the windowed elements, I had to insert an iframe layer on top of the other elements, with an opacity of 0 and of the same size of my canvas.
The iframe can be created dynamically this way:
this.iframe = document.createElement('iframe');
this.iframe.frameBorder=0;
this.iframe.style.display='block';
this.iframe.style.position='absolute';
this.iframe.style.left = '0px';
this.iframe.style.top = '0px';
this.iframe.style.zIndex = 1000;
this.iframe.style.opacity = 0;
this.container.appendChild(this.iframe);
As it is a windowed and windoless element, it can take precedence to the text and image elements.
I hope it will help. Pierre
精彩评论