Gibt es eine Möglichkeit, dieses Problem zu beheben?
Code: Select all
const canvas = document.getElementById('drawing-board');
const ctx = canvas.getContext('2d');
const canvasOffsetX = canvas.offsetLeft;
const canvasOffsetY = canvas.offsetTop;
canvas.width = window.innerWidth - canvasOffsetX;
canvas.height = window.innerHeight - canvasOffsetY;
let isPainting = true;
let lineWidth = 100;
let startX;
let startY;
const colour = "black";
ctx.strokeStyle = "black"
ctx.fillStyle= "transparent";
ctx.font = "italic bold 15pt Tahoma";
ctx.strokeText("StackOverFlow",100,240);
ctx.strokeStyle = colour;
const draw = (e) => {
if(!isPainting) {
return;
}
ctx.lineWidth = lineWidth;
ctx.lineCap = 'round';
ctx.lineTo(e.clientX - canvasOffsetX, e.clientY);
ctx.stroke();
}
canvas.addEventListener('mousedown', (e) => {
isPainting = false;
startX = e.clientX;
startY = e.clientY;
});
canvas.addEventListener('mouseup', e => {
isPainting = true;
ctx.stroke();
ctx.beginPath();
});
canvas.addEventListener('mousemove', draw);< /code>