CODEWITHSUNDEEP
javascriptcsshtmlhtml5-canvas
JayGatz
JayGatz

Reputation: 271

Make <canvas> the background of an html document

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.

Upvotes: 9

Views: 7020

Answers (2)

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94309

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);
});

Upvotes: 9

user2019515
user2019515

Reputation: 4503

Sure that would be possible with z-index, most probably the canvas will not be clickable because you're working with a container that's on top of it. So even if there appears to be no element the container is still there which prevents you from clicking on the canvas.

Upvotes: 0

Related Questions