Estoy tratando de crear un dibujo de lienzo HTML, pero el cursor de dibujo está fuera de su posición real.

Aquí está todo el código JavaScript/CSS/HTML: HTML5 Canvas drawing

Creo que el problema está en el código JavaScript, pero no puedo solucionarlo.

Aquí está el código JavaScript:

 let canvas = document.getElementById("canvas") canvas.height = window.innerHeight canvas.width = window.innerWidth let ctx = canvas.getContext("2d") ctx.lineWidth = 5 let prevX = null let prevY = null let draw = false let clrs = document.querySelectorAll(".clr") clrs = Array.from(clrs) clrs.forEach(clr => { clr.addEventListener("click", () => { ctx.strokeStyle = clr.dataset.clr }) }) let clearBtn = document.querySelector(".clear") clearBtn.addEventListener("click", () => { ctx.clearRect(0, 0, canvas.width, canvas.height) }) window.addEventListener("mousedown", (e) => draw = true) window.addEventListener("mouseup", (e) => draw = false) window.addEventListener("mousemove", function(e){ if(prevX == null || prevY == null || !draw){ prevX = e.clientX prevY = e.clientY return } let mouseX = e.clientX let mouseY = e.clientY ctx.beginPath() ctx.moveTo(prevX, prevY) ctx.lineTo(mouseX, mouseY) ctx.stroke() prevX = e.clientX prevY = e.clientY })