Move canvas position in HTML5 puzzle game

Question

I have downloaded a ready-made HTML5 tile-swapping puzzle, but I am not getting how to change the canvas position. If we change the canvas position by giving a margin to the body, the puzzle doesn't work. I'd like to align the puzzle to the middle of the page.

Here is a JSFiddle with the code for the puzzle:

https://jsfiddle.net/kilobyte/0ej6cv6w/

Here is an excerpt of the code you should examine, where I'm changing the margin:

function Add(){
    alert("Congratulation...! You have Won...!!");
        var btn=document.createElement("input");
        btn.type="button";
        btn.id="mybutton";
        btn.value="Submit";
        btn.style.width="100px";
        btn.style.height="50px";
        btn.style.background="green";
        btn.style.margin="100px";
        document.body.appendChild(btn);
        var buttonid =document.getElementById("mybutton");
        buttonid.addEventListener('click', ButtonClick,false);
    }
    function gameOver(){
        document.onmousedown = null;
        document.onmousemove = null;
        document.onmouseup = null;
        Add();  
    //initPuzzle();
    }

Answer 1

Edit: Ok, seems like Firefox works, but chrome has a different behaviour. Im not going to rewrite the game, but i can give you a pointer on what to do. You need to edit the function called onPuzzleClick(), its located on on line 103 in the code. Thats where the click position is set (_mouse.x and _mouse.y). You need to find out whats different in chrome and set the correct position there, id advise looking at the left-margin and top-margin or some absolute position or similar