DEV Community

Discussion on: How to build a Pixel Art Drawing App in React

Collapse
emilioschepis profile image
Emilio Schepis

Very interesting. What's the biggest grid you think we should be able to make without losing performance, considering that each pixel renders a div?

Collapse
alekswritescode profile image
Aleks Popovic Author

Hi Emilio! This is definitely not optimized for large canvas sizes. On my monitor 64x64 looks and works very well. Anything above that and I enter into a horizontal scrolling territory which isn't really great for drawing. There are definitely things that could be added to this concept that would alleviate such issues. For instance - implementing zoom in and zoom out, adjusting the "pixel" size etc.

Based on some articles I've seen - 10,000 divs should be a performance drop point. I've tested 128x128 grid and there is a noticeable delay during the grid generation, but drawing and scrolling after that works as usual.

On 256x256 there is a definitive drop in performance with both scrolling and coloring individual pixels. Definitely not something you would want and like to do using this app. :)

Collapse
emilioschepis profile image
Emilio Schepis

Thank you for the thorough answer, that's exactly what I needed to know.

Thread Thread
alekswritescode profile image
Aleks Popovic Author

No problem! I'm glad you liked the article and the project!