CODEWITHSUNDEEP
javascripthtmldomcanvas
KOLANICH
KOLANICH

Reputation: 3072

Problems with placing one canvas above another one

var origCanv=document.getElementById("canvas1");
var canv=document.createElement("CANVAS");
document.body.appendChild(canv);
canv.width=origCanv.width;
canv.height=origCanv.height;
var rect=origCanv.getBoundingClientRect();
canv.style.position="fixed";
canv.style.top=rect.top;
canv.style.left=rect.left;
canv.style.zIndex=999999;

If I make position absolute, the canvas is seen, but not in right place, if I make it fixed, I cant see it at all!!!

Upvotes: 0

Views: 38

Answers (1)

Jason Harwig
Jason Harwig

Reputation: 45591

Try adding a unit specifier on the top and left attributes and use position:absolute.

canv.style.position = 'absolute';
canv.style.top = rect.top + 'px';
canv.style.left = rect.left + 'px';

Probably also want to use a sane z-index. No index is necessary if canvas1 isn't positioned. Otherwise try lowest number > canvas1.style.zIndex

Here is a jsfiddle

Upvotes: 2

Related Questions