File size: 2,004 Bytes
1a11305 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
const canvas = document.getElementById('drawing-board');
// Get the 2D rendering context of the canvas
var ctx = canvas.getContext('2d');
// Initialize variables to track pointer movements
var isDrawing = false;
var lastX = 0;
var lastY = 0;
// Event listener to track pointer movements and draw lines
canvas.addEventListener('pointerdown', function (e) {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
});
canvas.addEventListener('pointermove', function (e) {
if (isDrawing) {
var x = e.offsetX;
var y = e.offsetY;
drawLine(lastX, lastY, x, y);
lastX = x;
lastY = y;
}
});
canvas.addEventListener('pointerup', function () {
isDrawing = false;
});
canvas.addEventListener('pointerout', function () {
isDrawing = false;
});
// Function to draw lines on the canvas
function drawLine(startX, startY, endX, endY) {
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(endX, endY);
ctx.strokeStyle = '#000'; // Color of the line
ctx.lineWidth = 2; // Thickness of the line
ctx.stroke();
ctx.closePath();
}
function showDialog() {
const modal = document.getElementById("dialog-area")
const overlay = document.getElementById("overlay");
const canvas = document.getElementById("drawing-board");
const ctx = canvas.getContext('2d');
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
modal.style.display = 'flex';
overlay.style.display = 'block';
}
function closeDialog() {
const modal = document.getElementById("dialog-area");
const overlay = document.getElementById("overlay");
const canvas = document.getElementById("drawing-board");
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
modal.style.display = 'none';
overlay.style.display = 'none';
}
function clearCanvas() {
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
} |