This program is highly interactive and, for the first time, allows visitors to use their creativity and leave with a finished creation after using it.
Users can place individual pixels or draw trails of pixels anywhere on the canvas. The program also offers customizable features, including the ability to change the brush color and size. Additionally, the program supports essential tools such as an eraser, undo, and redo options, as well as a save button that lets users save their completed artwork.
Each pixel is represented as a <div> element with attributes like x/y coordinates, size, and background color. While this is easy to implement, the downside is that as the number of pixels on the screen grows—reaching hundreds or even thousands—it results in the same number of <div> elements in the HTML. This can significantly impact performance, causing noticeable slowdowns, especially when users inspect the page's HTML structure.
Another factor that reduces performance and causes additional slowdowns is how I implemented the Eraser feature. Logically, the eraser should remove pixels by deleting the corresponding <div> elements. While this concept is easy to understand, implementing it is not as straightforward. The function essentially needs to search for all <div> elements with x/y coordinates located within the eraser's radius upon each mouse click. This results in a significant amount of individual searches for every pixel, which I assume would noticeably impact the program's responsiveness. So, I decided to implement the eraser in the simplest way possible: treating it like a brush but with the same color as the canvas. While this approach saved me a lot of hassle, it doesn’t actually remove <div> elements. Instead, it adds more of them, further increasing the total number of <div> elements and potentially worsening performance issues.
Thanksfully, the Undo/Redo features actually does what they're supposed to do: removing <div> pixels (undo) and adding <div> pixels (redo)
