Estoy tratando de hacer un boceto de grabado con HTML donde tengo un contenedor div con muchos elementos div, usando la visualización de cuadrícula en CSS.

HTML: <div id="canvas"></div>

Luego uso JS para agregar los elementos div:

 for(let i =1;i<=256;i++){ let squareDiv = document.createElement("div"); canvasElement.appendChild(squareDiv); canvasElement.setAttribute("draggable","false");}

El atributo arrastrable no funciona.

Cuando hago clic y arrastro para dibujar algo, está arrastrando una imagen tenue como se muestra a continuación:

¿Hay algún atributo que pueda usar para deshabilitar esto?

Editar: Todo el código javascript:

 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; }