Canvas and data integrity

twitter logo github logo ・1 min read

If you ever decide to do bitwise operations and do “bit-precise” data storing inside canvas image data, I have news for you.

First, take a pill in Ibiza and party hard:

2nd, get back to miserable Js dev life and confront the problem that was right in front of you whole the time.

BROWSERS ALTER RGB CHANNEL DATA BEHIND YOUR BACK!

That is, if you set the alpha channel of a pixel to any value other than 255 browser will eventually need to render that pixel to screen and represent it using RGB values. They combine alpha channel and RGB value to derive just the RGB values that represent the combination. Adding some amount of opacity to your pixels will inevitably “whiten” them.

So, when storing something to RGB channels set alpha to 255 otherwise it will mess up your data & data extracted from canvas will not remain the same!

twitter logo DISCUSS
Classic DEV Post from Apr 3

Workspace Wednesday: Show off your desk/computer setup!

Let’s share pics of everybody’s setups. Feel free to add details about your ha...

Luka Vidaković profile image
Web developer. Worked at multiple startups. Working on multiple personal projects.

😓 Sore eyes?

dev.to now has a dark version (in public beta).

Go to the "misc" section of your settings and select night theme ❤️