Methods for Click + Drag Art/Downloading Pictures on Pixel Art Maker

[Reilly Ford]

Hi,

I've been making a pixel art maker for a school project, and I've had two main problems:

1) The only way of changing the color of an individual pixel is by clicking on them one by one, and I'd like to be able to just hold down the first mouse button and drag the mouse around to color in lines and such. However, I've been unable to find anything like onclick or hover: that would combine the two and continue drawing if the user keeps the mouse held down.

This is what the function for setting a color for an individual pixel looks like at the moment, it's activated by clicking one of the divs in the grid - the pixels.

function setColor(pixel) {
  if(eraser == true) { // eraser is basically just a variable that tells the system whether it is currently using a color tool or the eraser tool
    pixel.style.backgroundColor = "white"; // if they are using the eraser, it sets the color of that pixel to white
    pixel.isBackground = true; // .isBackground is a boolean that I made that is used when changing backgrounds of the art to different colors or changing the colors in the art itself by the action buttons just under the grid
  } else {
    pixel.style.backgroundColor = penColor; // this just sets the background of the pixel to whatever the currently-selected pen color is
    pixel.isBackground = false;
  }
}

2) I'd really, really like to be able to download the images that are created on the grid, but I don't even know how to make things downloadable from a page.

You can mess around with the code as much as you'd like here. Any help is really appreciated.

Thank you!