RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to use for showing charts on your website.

More »


Get the latest version of RGraph (version 6.18, 1st June 2024) from the download page. You can read the changelog here. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »


RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£129) commercial license available.

More »

The globalCompositeOperation property

The globalCompositeOperation property determines how shapes and images are drawn onto the canvas. There are lots of options that are shown by the images and descriptions below (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.

Definitions of the different modes

This is the default mode of the canvas tag where the source (what you're drawing) is drawn over the destination (what's already on the canvas).

What's already on the canvas is used as a mask so that anything that's drawn subsequently is then subject to that mask and only bits that you draw that fall within the mask appear on the canvas.

Similar to the above mode but instead of things that fall within the mask being drawn - things that fall outside of the mask are drawn. This mode could be used to get a shadow to surround an odd shape.

Whatever it is that you're drawing (a red circle in the example shown) is only drawn to the canvas when it falls on top of what's already on the canvas (ie non-transparent pixels).

This mode is similar to the source-over mode but instead of what you're drawing appearing on top of what's already on the canvas, it appears behind what's already on the canvas. This mode allows a rudimentary concept of foreground/background layers.

With this mode what you're drawing is used as a "mask" and then what's already on the canvas is visible when it falls in that area. Everything else is made to be transparent.

A reverse of the above mode - again what you're drawing is used as the "mask" but then whatever is already on the canvas and doesn't fall in the area of what you're drawing is rendered to the canvas. Everything else is made to be transparent.

With this mode what's already on the canvas (the destination) is only visible where it overlaps what you're drawing (the source). Plus it's made to sit on top of what you're drawing.

Where shapes overlap, colour values are calculated by adding the different values together.

Where shapes overlap, colour values are calculated by subtracting the different values from each other.

This mode is quite straightforward. The only thing that's drawn to the canvas is what you're drawing. Whatever is on the canvas already is discarded. This mode is like clearing the canvas and then drawing to it.

Both the destination and the source are drawn to the canvas however where the two shapes overlap the canvas pixels are returned to transparency (instead of what you're drawing).

An example

    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);

Canvas layers with the globalCompositeOperation

One of the different options that's available to you is destination-over. This (in a simple sense) gives you a way to implement a background and foreground layer effect - so that you can draw something behind what is already on the canvas. You can see this effect by using the demo that's shown below.

An interactive example

View example on CodePen

In this example, you can use the dropdown box to change the globalCompositeOperation setting and see the effect that it has on how the red circle is drawn onto the canvas (the red circle is drawn at the mouse coordinates so move your mouse around).