As a person that creates art for enjoyment, I thought it would be exciting to combine my interests in art and tech into one project which gave me the idea to make a pixel art app myself. The purpose of the pixel art app project is to provide users with a fun platform for creating pixel art designs by providing essential features such as customizable grid sizes, a rich color palette selection, erasing capabilities, and the ability to save the created artwork as a PNG file.
Purpose and Goal
Web Stack
The pixel art website was built using a classic web stack, employing HTML, CSS, and JavaScript. HTML provided the structure of the website. CSS was utilized to enhance the visual presentation of the website, JavaScript enabled features such as changing the grid size, selecting colors, and erasing. Additionally, Dom-to-image, a library written in Javascript that can turn arbitrary DOM nodes into a vector (SVG) or raster (PNG or JPEG) image, was used to save the drawn picture as a PNG file. Together, these three fundamental web technologies worked in harmony to create a functional pixel art website.
Lessons Learned
Adding the image save feature ended up taking a lot of time to figure out. If I were to code this again from scratch I would have initially used the HTML5 Canvas feature to make the image save feature integration easier vs using only divs which ended up requiring an additional third-party library Dom to image. Although this library was a great feature HTML5 Canvas would have required fewer steps.
Additionally, I learned the importance of testing and debugging code to ensure a smooth and error-free user experience. I used the Run and Debug view in Visual Studio, the inspect feature in google chrome, and a lot of trial and error testing with the code. Throughout the project, I had the opportunity to hone my problem-solving skills and learned to approach challenges with a creative and adaptable mindset. Overall, this project provided valuable insights into the process of software development.