CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvas
JamesT
JamesT

Reputation: 47

Move a HTML5 Canvas Element

I'm making a small jigsaw like puzzle in html5. Each jigsaw piece is it's own canvas. I need to move the canvas element using the mouse position. I've managed to get the canvas that is clicked, I just need to move it. I tried manipulating the top and left style attributes but the canvas didn't move. Can this be done or am I trying something impossible.

Thanks!

function MouseDown(can, e)
{
    MovingCanvas = can;
    clicked = true;
}

function MouseMove(e)
{
    if(clicked)
    {
        var mx = e.clientX;
        var my = e.clientY;

        MovingCanvas.style.top = my;
        MovingCanvas.style.left = mx;
    }
}

Upvotes: 0

Views: 8573

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324800

e.clientX and e.clientY are integers.

Styles expect a string of the form {NUMBER}{UNIT}.

You are missing a unit, therefore it won't work.

MovingCanvas.style.top = my+"px";
MovingCanvas.style.left = mx+"px";

Upvotes: 3

Related Questions