Холст в адаптивной материализации css div

Question

Я пытаюсь реализовать доску карандашом и ластиком, используя HTML 5 холст и JavaScript. Он работает нормально, если я помещаю тег холста в тег тела. Но если я перемещу тот же тег холста в отзывчивую строку строки materialize css, он не будет адаптироваться в соответствии с родительским div. Карандаш и Ластик не работают. Можете ли вы подсказать мне, как сделать его адаптивным?

Вот js код

$(document)
    .ready(
        function () {
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');

            var canvasx = $(canvas).offset().left;
            var canvasy = $(canvas).offset().top;
            var last_mousex = last_mousey = 0;
            var mousex = mousey = 0;
            var mousedown = false;
            var tooltype = 'draw';

            // 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();
                            if (tooltype == 'draw') {
                                ctx.globalCompositeOperation = 'source-over';
                                ctx.strokeStyle = 'black';
                                ctx.lineWidth = 3;
                            } else {
                                ctx.globalCompositeOperation = 'destination-out';
                                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;

                    });


            use_tool = function (tool) {
                tooltype = tool;
            }
        });

Ниже css

#canvas {
    cursor: crosshair;
    border: 1px solid #000000;
}

Ниже html сетка

<div id="whiteboard-container" class="row">
    <div class="center col s12">
        <canvas id="canvas"></canvas>
        <input type="button" value="draw" onclick="use_tool('draw');" /> <input
                    type="button" value="erase" onclick="use_tool('erase');" />
    </div>
</div>

Как заставить его работать в div?

Answer 1

DOM MouseEvent properties

Это чистое решение JS.

DOM MouseEvent offset

Вы можете использовать свойства MouseEvent только для чтения offsetX и offsetY, чтобы получить относительные координаты событий мыши.

Примечания

• Я не знаю, передаются ли они jQuery

DOM MouseEvent page

В качестве альтернативы вы можете использовать MouseEvent свойства только для чтения pageX и pageY и вычесть позицию элемента холста и страницу положение прокрутки.

const bounds = canvas.getBoundingClientRect();
mouseX = event.pageX - bounds.left - scrollX;   
mouseY = event.pageY - bounds.top - scrollY;

Примечания

• scroll {X, Y] - это DOM window (или globalThis в контексте страницы) свойства
• отступы холста, границы и прямоугольная модель будут влиять на границы. См. getBoundingClientRect для подробностей
• Я не знаю, передаются ли эти (pageX, pageY) jQuery

jQuery

jQuery устарело . Нет браузеров, которым требуется поддержка устаревших DOM IE мертв . Использование jQuery только замедляет вашу страницу, но не дает никакой пользы.