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

Discussion in 'Javascript' started by Reilly Ford, Apr 13, 2018.

  1. Reilly Ford

    Reilly Ford

    Joined:
    Apr 13, 2018
    Messages:
    1
    Likes Received:
    0
    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.

    Code (Text):
    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!
     
    Reilly Ford, Apr 13, 2018
    #1
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.