First we have to understand what Pixel Art is. A Pixel Art is a form of digital art, created through the use of software, where images are edited on the pixel level.
Figure: A pixel art
To draw a picture in a pixel art editor we need a dynamic set of drawing tools and controls. The controls are the interface elements that appear below the picture.
The controls will be provided as an array of components constructors. Other the other hand Drawing Tools are things like drawing pixels or filling in an area. The application shows the set of available tools as a <select> field.
The article contents:
· Tool Select
· Color Select
· Drawing Tools
o Draw
o Rectangle
o Fill
o Pick
Tool Select: The first control is tool selection menu. It creates a <select> element with an option for each tool. By sets up a “change” event handler that updates the application state when we selects a different tool.
Color Select: An HTML <input> element with a type attribute of color gives us a form field that is specialised for selecting colors.
Drawing Tool: Draw
The most basic tool is draw tool. It changes any pixel that we click or tap to the currently selected color.
Drawing Tool: Rectangle
For Large shapes it can be useful to quickly create rectangles. The rectangle tool draws a rectangle between the point where we start dragging and the point that we drag to.
An important detail in this implementation is that when dragging, the rectangle is redrawn on the picture from the original state. That way, we can make the rectangle larger and smaller again while creating it, without the intermediate rectangles sticking around in the final picture. This is one of the reasons why immutable picture objects are useful.
Drawing Tool: Fill
The flood fill tool fills the pixel under the pointer and all adjacent pixels that have the same color.“Adjacent” means directly horizontally or vertically adjacent, not diagonally. This picture illustrates the set of pixels colored when the flood fill tool is used at the marked pixel:
Drawing Tool: Pick
The color picker tool allows us to point at a color in the picture to use it as the current drawing color.
