canvasalpha

Is the alpha flag for the canvas tag getContext function advisory only?

From a little test:

<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>

<script>
    context = document.getElementById('cvs').getContext('2d', {alpha: false});
    context.fillStyle = 'red';
    context.fillRect(0,0,100,100);
    context.fillStyle = '#ff07';
    context.fillRect(25,25,100,100);
</script>

It would appear that the alpha: option for the canvas tag getContext() method is advisory as when I set it I can still use semi-opaque colors (even though the canvas has a black background instead of a transparent one so the flag is clearly having an effect).

Is this the intended behaviour?

Solution

  • Yes it is the expected behavior. This flag is used to let the UA know that no other content in the web-page will be visible under the canvas, and thus it can be moved in its own renderering layer in the CSS compositor.
    But the color composition inside the canvas still works normally.

    The specs have this note:

    Thus, the bitmap of such a context starts off as opaque black instead of transparent black; clearRect() always results in opaque black pixels, every fourth byte from getImageData() is always 255, the putImageData() method effectively ignores every fourth byte in its input, and so on. However, the alpha component of styles and images drawn onto the canvas are still honoured up to the point where they would impact the output bitmap's alpha channel; for instance, drawing a 50% transparent white square on a freshly created output bitmap with its alpha set to false will result in a fully-opaque gray square.