[whatwg] Canvas feedback (various threads)

[Tab Atkins Jr.]

On Thu, Feb 10, 2011 at 4:56 PM, Ian Hickson <ian at hixie.ch> wrote:
> Looking at that demo, it seems that premultiplied removes possible options
> from the author. How do you go from red to actually transparent black,
> getting darker as you transition? Do you have to give a nearly-transparent
> black (alpha=0.01) to get around it or some such? That seems weird.

If you want to mimic the appearance of red->transparent black in
non-premultiplied space, then yes, you need to put in several
additional color-stops.  In premultiplied space, that transition is a
curved path.


>> It's not only the 'transparent' keyword; it affects all cases of
>> gradients between colors with different alpha values and different color
>> values.  And in cases where one of the endpoint alphas is not 0, it's
>> not possible to get the correct (premultiplied) result with a gradient
>> computed in nonpremultiplied space.
>
> Can you elaborate on that? I'm interested in seeing the cases that you
> can't do in one or the other of the colour spaces we're discussing. If one
> is a strict superset of the other, then it would make sense to specify
> that we use that one. If you can do the same gradients in both, then
> interoperability seems more important.

The two color-spaces are equivalent in terms of colors and gradients
than can be expressed, though the ease of expressing certain gradients
are different between them.

CSS does transitions in premultiplied space, and both FF and Webkit
are planning to do CSS gradients in premultiplied space as well (the
spec already requires it).  It would be unfortunate to have <canvas>
work differently than CSS here.


> The canvas gradient spec is pretty uniformly and interoperably implemented
> on this front:
>
>   http://software.hixie.ch/utilities/js/canvas/?c.clearRect(0%2C%200%2C%20640%2C%20480)%3B%0Ac.save()%3B%0Avar%20gradient%20%3D%20c.createLinearGradient(0%2C0%2C640%2C480)%3B%0Agradient.addColorStop(0%2C%20'rgba(255%2C255%2C255%2C1)')%3B%0Agradient.addColorStop(1%2C%20'rgba(0%2C0%2C0%2C0)')%3B%0Ac.fillStyle%20%3D%20gradient%3B%0Ac.fillRect(0%2C0%2C640%2C480)%3B%0Ac.restore()%3B%0A
>
> It's easy to work around this issue:
>
>   http://software.hixie.ch/utilities/js/canvas/?c.clearRect(0%2C%200%2C%20640%2C%20480)%3B%0Ac.save()%3B%0Avar%20gradient%20%3D%20c.createLinearGradient(0%2C0%2C640%2C480)%3B%0Agradient.addColorStop(0%2C%20'rgba(255%2C255%2C255%2C1)')%3B%0Agradient.addColorStop(1%2C%20'rgba(255%2C255%2C255%2C0)')%3B%0Ac.fillStyle%20%3D%20gradient%3B%0Ac.fillRect(0%2C0%2C640%2C480)%3B%0Ac.restore()%3B%0A
>
> I'm happy to change the spec on this, but I'm not going to change it ahead
> of the implementations. If you want this changed, I recommend getting the
> browser vendors to change this.

Ok.

~TJ