@@ -533,7 +582,13 @@
Subscribe to our Newsletter
// Clear canvas
document.getElementById('clear').addEventListener('click', () => {
- ctx.clearRect(0, 0, canvas.width, canvas.height);
+ if (confirm("Are you sure you want to clear the canvas? This action cannot be undone.")) {
+
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ }
+ else {
+ console.log("Clear action canceled.");
+ }
});
// Drawing functions
@@ -542,39 +597,39 @@
Subscribe to our Newsletter
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);
function drawGrid() {
- if (!showGrid) return; // Only draw if the grid is enabled
- ctx.save();
- ctx.strokeStyle = '#c0c0c0';
- ctx.lineWidth = 0.5;
-
- const gridSpacing = 20;
- for (let x = 0; x < canvas.width; x += gridSpacing) {
- ctx.beginPath();
- ctx.moveTo(x, 0);
- ctx.lineTo(x, canvas.height);
- ctx.stroke();
- }
- for (let y = 0; y < canvas.height; y += gridSpacing) {
- ctx.beginPath();
- ctx.moveTo(0, y);
- ctx.lineTo(canvas.width, y);
- ctx.stroke();
- }
- ctx.restore();
- }
-
- // Function to clear and redraw the canvas, including the grid if enabled
- function updateCanvasWithGrid() {
- ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
- drawGrid(); // Draw grid if enabled
- // Any other canvas drawing updates should go here if needed
- }
-
- // Event listener to toggle the grid on and off
- document.getElementById('toggleGridButton').addEventListener('click', () => {
- showGrid = !showGrid; // Toggle grid state
- updateCanvasWithGrid(); // Redraw canvas with or without grid
- });
+ if (!showGrid) return; // Only draw if the grid is enabled
+ ctx.save();
+ ctx.strokeStyle = '#c0c0c0';
+ ctx.lineWidth = 0.5;
+
+ const gridSpacing = 20;
+ for (let x = 0; x < canvas.width; x += gridSpacing) {
+ ctx.beginPath();
+ ctx.moveTo(x, 0);
+ ctx.lineTo(x, canvas.height);
+ ctx.stroke();
+ }
+ for (let y = 0; y < canvas.height; y += gridSpacing) {
+ ctx.beginPath();
+ ctx.moveTo(0, y);
+ ctx.lineTo(canvas.width, y);
+ ctx.stroke();
+ }
+ ctx.restore();
+ }
+
+ // Function to clear and redraw the canvas, including the grid if enabled
+ function updateCanvasWithGrid() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
+ drawGrid(); // Draw grid if enabled
+ // Any other canvas drawing updates should go here if needed
+ }
+
+ // Event listener to toggle the grid on and off
+ document.getElementById('toggleGridButton').addEventListener('click', () => {
+ showGrid = !showGrid; // Toggle grid state
+ updateCanvasWithGrid(); // Redraw canvas with or without grid
+ });
function startDrawing(e) {
isDrawing = true;
[startX, startY] = [e.offsetX, e.offsetY];
@@ -691,248 +746,273 @@
Subscribe to our Newsletter
}
+
-
-
-
-
-
-
-
-
-
-