Pixel Art
Build a pixel-art editor: a 15 by 15 canvas, a palette of colours, Draw and Erase modes, and a Clear button.
Requirements
- Clicking a cell paints it with the selected colour (or clears it in Erase mode).
- Pressing and dragging paints every cell the pointer passes over, until release anywhere on the page.
- Picking a swatch selects that colour and switches back to Draw mode; the active swatch and mode are visibly marked.
- Clear empties the canvas.
- Painting a cell with the colour it already has does not re-render the canvas.
Hints
Hint 1
One flat array of SIZE * SIZE colour strings (or null) is the whole drawing; the cell index is the array index.
Hint 2
Painting while dragging is onPointerDown (start the stroke and paint) plus onPointerEnter (paint if a stroke is active), with a document pointerup listener to end it.
Hint 3
Return the previous array unchanged when nothing changes, so React skips the render.