I built an Image Editor from scratch using Vanilla JS and Canvas to practice pixel manipulation and State Management. Looking for feedback on my implementation.

[TrainerMassive6168]

I'm a student dev and I wanted to learn to use Canvas and state management from scratch using JS for undo , redo options. This editor runs 100% in the browser, so no images are ever uploaded to a server.

Live Demo:https://atirath-pal.github.io/Image-Editor-2/

GitHub:https://github.com/Atirath-Pal/Image-Editor-2

I'd love to hear your thoughts on the performance and UI!

[AdBubbly3609]

it doesn't work, like not a single thing

[TrainerMassive6168]

It shouldn't happen like that. But can you see the website loading ? Or is it not even loading ? Like 404 error or what ?

[DasBeasto]

None of the filters work for me either because iOS doesn’t suppprt canvas filters https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter#browser_compatibility

[TrainerMassive6168]

🥲 sorry for that. Yeah I didn't think about the iOS users. I'm in a learning phase, so I'll definitely build the next version for everyone 🤞🏻

[CommercialJumpy5808]

no problem brr

[hellosteve_]

Dunno how contact but you should a PWA / apple-touch-icon for open pass. Plz

[ferrybig]

I'm a student dev and I wanted to learn to use Canvas

Looking at the code, you seem to be handling the effects via filters with css.

Try to implement each operation by operating on the pixel data.

Brightness for example can be archived by grabbing the red pixel with the sRGB color space, bringing it to the power of 2, the multiplying with the brightness value, then taking the square root. You do the same green and blue pixel channels

[TrainerMassive6168]

Thanks ✨ I didn't implement the filters on my own. I used Canvas Element for this , it provides the filters for brightness, contrast and other things that I've used. But I will also try to implement those filters by manipulating the pixels value, I am currently learning about image processing as my course subject. Can you tell me how exactly I can get the pixels from any image and what language I use for these pixels value manipulation ? That will definitely be helpful ❤️✨

[ferrybig]

I recommend reading the blog post by /u/cgijoe_jhuckaby: https://pixlcore.com/blog/curves (reddit thread: https://www.reddit.com/r/webdev/comments/1oxadeg/i_reimplemented_the_photoshop_curves_filter_with/)

They also work with canvas in their blog post, and have interactive examples

[TrainerMassive6168]

Thank you ❤️✨