Menu
Is there a way I can make an HTML5 canvas the background of a web page I am making and place all the elements on top of it.
So it acts like the <body>?
I tried doing this with z-index and positioning the elements on top, but then they were click-able or focus-able. I need them to still be functioning, but the canvas to also be clickable just in the background and not clickable where there are elements over it.
333
Can I use the canvas element as a css background? You can use a canvas element as a background, but CSS doesn't have anything to do with that. Yes you can!!!!
You can embed HTML in the Rich Content Editor. When creating custom HTML coding in Canvas, you may discover that certain HTML codes do not work upon saving. This is because Canvas will only support certain HTML elements for security reasons. This also applies to content copied and pasted from an external source.
The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript. The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
Just set the <canvas>'s z-index to -1. If your canvas is covered by containers on top, simulate custom events using createEvent.[1]
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);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
