Best IT Recipes

Make the <canvas> html document background

Is there a way to make the HTML5 canvas the background of the webpage I'm creating and put all the elements on top of it.

So does it act like a <body> ?

I tried doing this with the z-index and positioning the elements on top, but then they were clickable or focused. I need them to still work, but the canvas can also be clicked only in the background, and not click where there are elements above it.

+7
javascript css html5 html5-canvas
Jun 09 '13 at 5:41
source share
2 answers

Just set the <canvas> z-index to -1 . If your canvas is covered with containers on top, simulate custom events using createEvent . [one]

Demo: http://jsfiddle.net/DerekL/uw5XU/

 var canvas = $("canvas"), //jQuery selector, similar to querySelectorAll() //... function simulate(e) { var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("mousemove", true, true, window, 0, e.screenX, e.screenY, e.clientX, e.clientY, false, false, false, false, 0, null); canvas[0].dispatchEvent(evt); } $("body > *").each(function () { this.addEventListener("mousemove", simulate); });
+7
Jun 09 '13 at 6:06 on
source share
— -

I am sure that this is possible with z-index , most likely, the canvas will not be accessible for clicks, because you are working with a container that is on top of it. Therefore, even if there is no element, the container still exists, which prevents you from clicking on the canvas.

-one
Jun 09 '13 at 5:44 on
source share


More articles:


All Articles