The globalCompositeOperation property

  Read comments...

The globalCompositeOperation property determines how shapes and images are drawn onto the canvas. There are lots of options which are demonstrated by this image (remember that what you're drawing is the source and the destination is what's already on the canvas). The default value is source-over.

Different settings for the globalCompositeOperation property

An example

<script>
    window.onload = function ()
    {
        var canvas = document.getElementById('cvs');
        var context = canvas.getContext('2d');

        // Set the globalCompositeOperation to the default
        context.globalCompositeOperation = 'source-over';
        
        var img = new Image();
        img.src = '/images/logo.png';
        img.onload = function ()
        {
            context.drawImage(img, 16, 16);
        }
    }
</script>

Pseudo-layers with the globalCompositeOperation

Out of the different options that are available to you one useful mode is destination-over. This (in a very simple sense) gives you a way to implement a background and foreground layer effect - so you can draw something behind what is already on the canvas. There is a demonstration of this at the link below.

Share RGraph
X

Comments