mozilla
Your Search Results

    CanvasRenderingContext2D.globalCompositeOperation

    The CanvasRenderingContext2D.globalCompositeOperation property of the Canvas 2D API sets the type of compositing operation to apply when drawing new shapes, where type is a string identifying which of the compositing or blending mode operations to use.

    See also the chapter Compositing in the Canvas Tutorial.

    Syntax

    ctx.globalCompositeOperation = type;

    Types

    Examples

    Using the globalCompositeOperation property

    This is just a simple code snippet using the globalCompositeOperation property to draw two rectangles that exclude themselves where they overlap.

    HTML

    <canvas id="canvas"></canvas>
    

    JavaScript

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    
    ctx.globalCompositeOperation = "xor";
    
    ctx.fillStyle = "blue";
    ctx.fillRect(10, 10, 100, 100);
    
    ctx.fillStyle = "red";
    ctx.fillRect(50, 50, 100, 100);
    

    Edit the code below and see your changes update live in the canvas:

    Specifications

    Specification Status Comment
    WHATWG HTML Living Standard
    The definition of 'CanvasRenderingContext2D.globalCompositeOperation' in that specification.
    Living Standard  
    Compositing and blending Level 1 Candidate Recommendation  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support (Yes) (Yes) (Yes) (Yes) (Yes)
    Blend modes ? 20 (20) ? ? ?
    Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
    Blend modes ? ? 20.0 (20) ? ? ?
    • In WebKit- and Blink-based Browsers, a non-standard and deprecated method ctx.setCompositeOperation() is implemented besides this property.

    Gecko-specific notes

    • An early Canvas specification draft specified the value "darker". However, Firefox removed support for "darker" in version 4 (bug 571532). See also this blog post that suggests to use the difference value to achieve a similar affect to "darker".

    See also

    Document Tags and Contributors

    Contributors to this page: fscholz
    Last updated by: fscholz,
    Hide Sidebar