DEV Community

Cover image for How to build a Pixel Art Drawing App in React

How to build a Pixel Art Drawing App in React

Aleks Popovic on December 05, 2020

Pixel art games have been making a huge comeback in recent years, but this time not because we are limited by technology, but because pixel art is ...
Collapse
 
ciochetta profile image
Luis Felipe Ciochetta

I will be trying this today, seems awsome

Collapse
 
alekswritescode profile image
Aleks Popovic

Thank you ciochetta! I'm glad you liked it!

Collapse
 
ciochetta profile image
Luis Felipe Ciochetta

I did try it and I've butchered a good chunk of your code, ahaha

if you wanna check it out > dev.to/ciochetta/pixel-art-editor-...

Thread Thread
 
alekswritescode profile image
Aleks Popovic • Edited

That's awesome! I loved your additions to the app. They are pretty advanced too considering you just started learning React. Good job!

Thread Thread
 
ciochetta profile image
Luis Felipe Ciochetta

thanks man :)

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

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

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

Collapse
 
alekswritescode profile image
Aleks Popovic

Let me know if you have any questions or comments! I really loved working on this one.

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
alekswritescode profile image
Aleks Popovic

Thank you CiaraMaria! I'm glad you liked it!

Collapse
 
dramaticbean profile image
DramaticBean🇵🇹

Just tried this. It was super fun

Collapse
 
alekswritescode profile image
Aleks Popovic

Thank you DramaticBean! I really appreciate that!

Collapse
 
lcscou profile image
lcscou

Absolutely amazing!! For sure i'll do it... Thanks for sharing!!

Collapse
 
alekswritescode profile image
Aleks Popovic

I'm glad you liked it Icscou! Thank you very much!