Need help with creating an HTML etch-a-sketch! I have a div container with multiple div elements inside it, all set up with CSS grid display.
HTML structure:
<div id="canvas"></div>To populate the canvas with div elements, I've used JS:
for(let i =1;i<=256;i++){
let squareDiv = document.createElement("div");
canvasElement.appendChild(squareDiv);
canvasElement.setAttribute("draggable","false");}
Unfortunately, the draggable functionality is not working as expected.
When attempting to draw on the canvas by clicking and dragging, instead of drawing, it creates a faint image like this: https://i.sstatic.net/KomOT.png
Is there a way to disable this drag effect?
Complete JavaScript code for reference:
canvasElement =document.getElementById("canvas")
let isToggling = false;
function enableToggle(e) {
isToggling = true;
}
function disableToggle() {
isToggling = false;
}
function toggle(e) {
if (isToggling === false) {
return;
}
console.log('toggle:', e.target);
e.target.classList.add('red');
}
for(let i =1;i<=256;i++){
let squareDiv = document.createElement("div");
canvasElement.appendChild(squareDiv);
canvasElement.setAttribute("draggable","false");
squareDiv.onmousedown=enableToggle;
squareDiv.onmouseenter=toggle;
squareDiv.onmouseup=disableToggle;
}