CODEWITHSUNDEEP
javascriptjquerycsscanvas
user2602079
user2602079

Reputation: 1393

Javascript, CSS, jQuery - my canvas moves to where it shouldnt be

Problem is in title. It used to do it on the odd occasion. Then i added the jQuery rotate.js plugin to spin my heading 360 degrees and now it is constantly placed to the right of where it should be. It may be interesting to note that i got the offset of the canvas with 

var rect = gameController.canvas.getBoundingClientRect();
var offset = {
    x: rect.left,
    y: rect.top
};

And that still has coordinates of 0,0 in the top left corner of where it should be ( which is correct and how it should be when the canvas has not moved).

#canvas {
    z-index: 1;
    position: absolute;
    margin-top: 52px;
    margin-left: 44px;
    background-image:url(images/background.jpg);
}

If the position is absolute, it is removed from the document and nothing will make it move. Strange.

Upvotes: 1

Views: 105

Answers (2)

user2602079
user2602079

Reputation: 1393

I'm not sure why it moved, i probably have a css error somewhere..but i had my canvas as position absolute, relative to a div that it was inside. I placed my canvas right at the top of the body tag so it was absolute, relative to the whole page, then changed the placement of it with top and bottom to get it correct. Now nothing will move it. It works fine with the rotate.js plugin. Thanks for having a look at my question.

Upvotes: 0

Aviv Shaked
Aviv Shaked

Reputation: 762

getBoundingClientRect() returns the sum of the canvas and its css border-boxes.

Maybe check the canvas with getClientRects() to see exactly where it is.

Upvotes: 1

Related Questions