[Volonter]

Привет! Нашел простенький скрипт, который рисует в canvas мышкой или на сенсорных устройствах пальцем. Но есть проблема - не могу управлять шириной поля canvas. Мне нужно, чтобы оно было адаптивным, занимало всю ширину родителя, бутстраповскую колонку col-12 col-lg-6, но если ему задать ширину 100%, то линии рисунка остают от курсора (или пальца), а если ширина указана 320px - то все четко, линия прямо под курсором, как если карандашом пишешь. Вот кодинг

var canvas = document.getElementById('canvas');
var startedPainting = false;

canvas.addEventListener("mousedown", handleStart, false);
canvas.addEventListener("mousemove", handleMove, false);
canvas.addEventListener("mouseup", handleEnd, false);
canvas.addEventListener("touchstart", handleStart, false);
canvas.addEventListener("touchmove", handleMove, false);
canvas.addEventListener("touchend", handleEnd, false);

function handleStart(evt) {
    evt.preventDefault();

    startedPainting = true;
    var el = $("#canvas").get(0);
    var ctx = el.getContext("2d");
    ctx.lineWidth = 3;
    var touches = evt.changedTouches;

    if (touches) {
        ctx.moveTo(touches[0].pageX - el.offsetLeft, touches[0].pageY - el.offsetTop);
        for (var i = 0; i < touches.length; i++) {
            ctx.lineTo(touches[i].pageX - el.offsetLeft, touches[i].pageY - el.offsetTop);
        }
    } else {
        ctx.moveTo(evt.pageX - el.offsetLeft, evt.pageY - el.offsetTop);
        ctx.lineTo(evt.pageX - el.offsetLeft, evt.pageY - el.offsetTop);
    }
    ctx.stroke();
}


function handleMove(evt) {
    evt.preventDefault();

    if (startedPainting) {
        var el = $("#canvas").get(0);
        var ctx = el.getContext("2d");
        ctx.lineWidth = 3;
        var touches = evt.changedTouches;

        if (touches) {
            for (var i = 0; i < touches.length; i++) {
                ctx.lineTo(touches[i].pageX - el.offsetLeft, touches[i].pageY - el.offsetTop);
            }
        } else {
            ctx.lineTo(evt.pageX - el.offsetLeft, evt.pageY - el.offsetTop);
        }
        ctx.stroke();
    }
}

function handleEnd(evt) {
    evt.preventDefault();
    startedPainting = false;
    var el = $("#canvas").get(0);
    var ctx = el.getContext("2d");
    ctx.lineWidth = 3;
    var touches = evt.changedTouches;

    if (touches) {
        for (var i = 0; i < touches.length; i++) {
            ctx.lineTo(touches[i].pageX - el.offsetLeft, touches[i].pageY - el.offsetTop);
        }
    } else {
        ctx.lineTo(evt.pageX - el.offsetLeft, evt.pageY - el.offsetTop);
    }
    ctx.stroke();
}

подозреваю, что вся магия отступов кроется в строчках типа этой

el.offsetLeft, touches[0].pageY - el.offsetTop

но как ни старался там что-то менять, у меня ничего не получилось.
Подскажите что поправить?
Заранее благодарю!