Сдвинутая кисть Canvas

Question

Я пытаюсь использовать Canvas в Javascript для рисования чего-либо в пустом прямоугольнике, но все, что я получил, это смещенная кисть, подобная этой: https://i.imgur.com/s7g34wi.gifv

Вот мой код:

    var canvasE = {
    canvas : document.getElementById("canvas"),
    ctx : canvas.getContext("2d"),
    rect : canvas.getBoundingClientRect(),
    mouse : {x: 0, y: 0},


    
    initCanvas(){
        canvasE.canvas.addEventListener('mousemove', function(e){
            canvasE.mouse.x = e.offsetX
            canvasE.mouse.y = e.offsetY
        }, false);

        canvasE.ctx.lineWidht = 3;
        canvasE.ctx.lineJoin = "round";
        canvasE.ctx.lineCap = "round";
        canvasE.ctx.strokeStyle = "black";

        canvasE.canvas.addEventListener('mousedown', function(e){
            canvasE.ctx.beginPath();
            canvasE.ctx.moveTo(canvasE.mouse.x, canvasE.mouse.y);
            canvasE.canvas.addEventListener('mousemove', onPaint, false);
        }, false);
    
        canvasE.canvas.addEventListener('mouseup', function(e){
            canvasE.canvas.removeEventListener('mousemove', onPaint, false);
        }, false);

        onPaint = function() {
            canvasE.ctx.lineTo(canvasE.mouse.x, canvasE.mouse.y);
            canvasE.ctx.stroke();
        }
    },

    clear(){
        canvasE.ctx.clearRect(0, 0, canvas.width, canvas.height);
    },}
    
canvasE.initCanvas();

canvas
{
  border: 1px solid black;
}

<canvas id="canvas"></canvas>

Кто-нибудь может мне помочь?

Answer 1

Это ваш CSS. НИКОГДА, НИКОГДА не указывайте ширину и высоту для <canvas>, используя CSS. Всегда указывайте это внутри тега <canvas>. Я исправил это:

var canvasE = {
    canvas : document.getElementById("canvas"),
    ctx : canvas.getContext("2d"),
    rect : canvas.getBoundingClientRect(),
    mouse : {x: 0, y: 0},


    
    initCanvas(){
        canvasE.canvas.addEventListener('mousemove', function(e){
            canvasE.mouse.x = e.offsetX;
            canvasE.mouse.y = e.offsetY;
        }, false);

        canvasE.ctx.lineWidth = 3;
        canvasE.ctx.lineJoin = "round";
        canvasE.ctx.lineCap = "round";
        canvasE.ctx.strokeStyle = "black";

        canvasE.canvas.addEventListener('mousedown', function(e){
            canvasE.ctx.beginPath();
            canvasE.ctx.moveTo(canvasE.mouse.x, canvasE.mouse.y);
            canvasE.canvas.addEventListener('mousemove', onPaint, false);
        }, false);
    
        canvasE.canvas.addEventListener('mouseup', function(e){
            canvasE.canvas.removeEventListener('mousemove', onPaint, false);
        }, false);

        onPaint = function() {
            canvasE.ctx.lineTo(canvasE.mouse.x, canvasE.mouse.y);
            canvasE.ctx.stroke();
        }
    },

    clear(){
        canvasE.ctx.clearRect(0, 0, canvas.width, canvas.height);
    },}
    
canvasE.initCanvas();

canvas
{
  border: 1px solid black;
}

<canvas id="canvas" width="200px" height="200px"></canvas>

Я также исправил ошибки, которые я упомянул в своем комментарии:)