DEV Community

Luka Vidaković
Luka Vidaković

Posted on • Originally published at lvidakovic.com

Canvas and data integrity

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!

Top comments (0)