Hugging Face's logo

Spaces:
bariumc
/
NepaliCNN
Running

App Files Community
NepaliCNN / static /script /dialog.js
pujan paudel
first commit
1a11305
Raw History Blame Contribute Delete
2 kB
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);
}