Peasel

Peasel is a website that utilizes HTML's canvas tag to display a blank canvas that allows the user to create pixel art.

The website is currently hosted on Render here: https://peasel.onrender.com/

To run the program locally:

• Download code
• In terminal, run npm install to download dependencies
• In terminal, run npm start to start the server
• In browser, go to localhost:3000

Current functionality:

• Grid-size: The user can initially choose from a 16x16, 32x32, or 64x64 grid.

• Pen: The user can draw using either left or right mouse button based on the color they wish to use. Drawing can be done using a single click or drag-and-draw.

• Eraser: Erasing can be done with drag-and-draw or a single click.
• Paint Bucket: The user can use the left or right mouse button to fill with the preferred color.

• Delete: Erases the entire canvas to start over. Asks the user if they are sure they want to erase the canvas before doing so.

• Eyedropper: Replaces the left-mouse color with the color that is clicked on.
• Color Swatches: A left and right color swatch for changing left/right mouse colors.
• Random-color: The dice icon when clicked will generate a random color for the left-mouse color-swatch.
• Swap-colors: This swaps the left and right colors.
• Zoom: The canvas can be zoomed in and out via the scroll wheel on the mouse or touchpad

Future functionality:

• Grid-size: Will change the size of the grid after initial entry.
• Save: Will save the pixel-art as a download.
• Drag Canvas: Drag the canvas around to help when zooming in.
• Zoom Buttons: Zoom in/out using buttons.

Icons:

All icons are from SVG Repo

Pencil SVG

Eraser SVG

Fill SVG

Resize SVG

Delete SVG

Save SVG

Eyedropper SVG

Dice SVG

Swap SVG