CODEWITHSUNDEEP
javascriptjqueryhtmlcsscanvas
Daniel Kou
Daniel Kou

Reputation: 29

Append canvas to document body using JS

I am trying to add a canvas to my html document such that it is in position 0,0 and is overlayed above all other elements. I've done some research and by all means, I think I am doing the right thing:

canvas.style.position = "absolute";
canvas.style.left = "0px";
canvas.style.top = "0px";
canvas.style.zIndex = "100";
body.appendChild(canvas);

However, the canvas appears at the bottom of the document, rather than at the top left corner, above all elements. Absolute position and setting the coordinates should do the trick, no?

Upvotes: 2

Views: 3956

Answers (2)

Mathijs Rutgers
Mathijs Rutgers

Reputation: 815

Two methods that work for me: http://jsfiddle.net/Screetop/8z5ou7L4/2/ Just add document in front of body, or search in the document for tagName body and append. Else it's just a detached element that the browser does not correctly render.

var canvas = document.createElement('canvas');
canvas.style.position = "absolute";
canvas.style.left = "0px";
canvas.style.top = "0px";
canvas.style.zIndex = "100";
canvas.style.background = 'red';
document.body.appendChild(canvas);

var canvas = document.createElement('canvas');
canvas.style.position = "absolute";
canvas.style.right = "0px";
canvas.style.top = "0px";
canvas.style.zIndex = "100";
canvas.style.background = 'purple';
document.getElementsByTagName('body')[0].appendChild(canvas);
.test {
    height: 500px; 
    width: 100%;
    background: blue;
}
<div class="test"></div>

Upvotes: 2

Canvas
Canvas

Reputation: 5897

Simply add a new div which will be before the content and just target that like so

<div class="canvas-placement">
</div>

jQuery

canvas.style.position = "absolute";
canvas.style.left = "0px";
canvas.style.top = "0px";
canvas.style.zIndex = "100";
$('.canvas-placement').append(canvas);

Upvotes: 0

Related Questions