Canvas reference: The globalCompositeOperation property

The globalCompositeOperation property determines how drawings are added to the canvas. It has a variety of modes - one of which can be used to achieve foreground/background layers (see below).

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.

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>

Canvas 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.

• Using the canvas globalCompositeOperation setting to achieve background and foreground layers