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!