Disable dragging in HTML webpage

I’m trying to make an etch-a-sketch with HTML where I have a div container with lots of div elements in it, using grid display in CSS.

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

Then I use JS to add the div elements:

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

The draggable attribute doesn’t work.

When I click and drag to draw something, it is dragging a faint image as below:

Is there an attribute I could use to disable this ?