Javascript HTML холст

Question

В настоящее время у меня есть JS холст с рисунком мыши. Верхний левый др aws точно, но от этого не откалиброван. Я предполагаю, что это проблема с mousex / mousey во время движений мыши, но не могу точно определить, что это такое. Холст также находится в столбце bootstrap - может ли это быть проблемой?

JS ниже

var canvas = document.getElementById('sheet');
    var ctx = canvas.getContext('2d');
    //Variables
    var canvasx = $(canvas).offset().left;
    var canvasy = $(canvas).offset().top;
    var last_mousex = last_mousey = 0;
    var mousex = mousey = 0;
    var mousedown = false;

//Mousedown
    $(canvas).on('mousedown', function(e) {
        last_mousex = mousex = parseInt(e.clientX-canvasx);
        last_mousey = mousey = parseInt(e.clientY-canvasy);
        mousedown = true;
    });

    //Mouseup
    $(canvas).on('mouseup', function(e) {
        mousedown = false;
    });

    //Mousemove
    $(canvas).on('mousemove', function(e) {
        mousex = parseInt(e.clientX-canvasx);
        mousey = parseInt(e.clientY-canvasy);
        if(mousedown) {
            ctx.beginPath();
            ctx.globalCompositeOperation = 'source-over';
            ctx.lineWidth = 10;
            ctx.moveTo(last_mousex,last_mousey);
            ctx.lineTo(mousex,mousey);
            ctx.lineJoin = ctx.lineCap = 'round';
            ctx.stroke();
        }
        last_mousex = mousex;
        last_mousey = mousey;
    });

пример