Colors render differently in Chrome and Safari

[duner]

This is the exact same version of quotable, with the exact same theme, running in two different browsers. I know I'm color blind, but those colors are not rendering the same.

A first Google suggests that maybe it has something to do with this https://bugs.chromium.org/p/chromium/issues/detail?id=425935:

The canvas specification does not state what colorspace a 2D Canvas pixel buffer uses, so browser implementors are free to use what they feel is appropriate. Chrome's implementation treats it as being in the display's color space (as opposed to some other implementations that use sRGB). Right now drawImage is pretty much the only draw method that does the right thing in terms of color management. Unfortunately, when strokeStyle and fillStyle are constructed from color literals, sRGB colors end up being treated as if they already had the display profile baked in, which is not the case.

[duner]

There is also a color difference between the version that shows up in the GUI in Chrome and the version that gets downloaded. YAY FOR TECHNOLOGY.

[eads]

I have been wondering if we DO need to render these on a server of some sort. It still might not solve this fucking problem though.

[eads]

The other thing is getting consistent retina-quality versions. HTML2Canvas struggles with that one.

[duner]

@eads Those are the two things I'm kinda trying to figure out right now. I was paroozing @jemory's work on retina quality images earlier #58 and was maybe going to implement that.

I wonder if there are other options besides HTML2Canvas for doing that kind of thing. Maybe it makes sense to just do everything in canvas from the beginning? I'm not sure if that would fix the color thing though.

[duner]

I also just took a look at the live version of Vox's meme tool and they seem to also have this same problem with colors rendering correctly when downloaded. http://apps.voxmedia.com/tools/meme/sbnation/

[eads]

The color thing seems baked into the canvas implementation and squishiness around color space.

I have a hard time imagining something other than HTML2Canvas (though there might be better implementations of the idea) that don't involve farming out the work to an external server/service.

[TylerFisher]

I've already implemented dom-to-image, which is a far cleaner pipeline, over here 34eb4d3. Same issue.