Building a Pixal Art with React

Live Demo

https://yingchieh.github.io/Pixel_Art/

Goals

• 1. Basic grid 8x8 rendering
• 2. Possibility of choosing colors from a palette
• 3. Grid size can be chosen
  • 8x8
  • 12x12
  • 16x16
  • 32x32
• 4. Download option (JPG / PNG / GIF)
• 5. Paint bucket / fill tool
  • Fills in neighboring pixels whose color value matches the pixels you click

Resource

• Building a Pixel Art Maker with React -

  https://www.youtube.com/watch?v=__9xLZwvHUs

• Export React Components as Images -

  https://javascript.plainenglish.io/export-react-components-as-images-15168b73b0eb

  https://github.com/macro6461/html2canvas-demo/blob/main/src/components/HtmlCanvasDemo.js

  https://www.geeksforgeeks.org/how-to-take-screenshot-of-a-div-using-javascript/