mikleg/pixel-art-maker

pixel art maker with only native JavaScript

Pixel Art Maker

In this exercise, you'll create your own pixel art maker which will allow a user to choose colors from a palette and then paint pixel art. The interface is completely up to you, but it could look something like this.

Bonus 1

Improve the mouse so it behaves like a real paintbrush. In other words, allow the user to paint by clicking and dragging across the canvas. For this, you'll need a combination of the mousedown, mouseenter, and mouseup events.

TIP: The mouseenter event doesn't bubble up the DOM tree.

Bonus 2

Add a color picker which allows the user to select any brush color using the <input type="color"> tag and the change event.

Bonus 3

Research LocalStorage and make a way to Save and Load a drawing. Research JSON.stringify and JSON.parse as a way to put the drawing into LocalStorage.

Bonus 4

Create a fill tool that will flood fill boundaries with a chosen paint color.

Deployment

Read over the following articles to learn how to deploy this web site to Surge.

• Getting started with Surge
• Remembering a domain

A good domain name for this project is USERNAME-pixel-art-maker.surge.sh where USERNAME is your GitHub username in all lowercase letters. Once deployed and everything works as you expect, copy your Surge URL and paste it at the top of your GitHub repository's page.

ALL bonus missions were implemented There is my version: http://mikleg-pixel-art-maker.surge.sh