SHARE THIS PAGE

HTML Reference

HTML by Alphabet HTML by Function HTML Attributes HTML Events HTML Canvas HTML Audio/Video HTML Doctypes HTML Colornames HTML Colorpicker HTML Colormixer HTML Character Sets HTML ASCII HTML ISO-8859-1 HTML Symbols HTML URL Encode HTML Lang Codes HTTP Messages HTTP Methods Keyboard Shortcuts

HTML Tags

<!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <command> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <head> <header> <hgroup> <h1> - <h6> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <keygen> <label> <legend> <li> <link> <map> <mark> <menu> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML canvas globalCompositeOperation Property

HTML Canvas Reference

Example

Draw rectangles using two different globalCompositeOperation values. Red rectangles are destination images. Blue rectangles are source images:

source-over

destination-over

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.globalCompositeOperation="source-over";
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);

ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.globalCompositeOperation="destination-over";
ctx.fillStyle="blue";
ctx.fillRect(180,50,75,50);

Try it yourself »

Browser Support

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the globalCompositeOperation property.

Note: Internet Explorer 8 and earlier versions, do not support the <canvas> element.

Definition and Usage

The globalCompositeOperation property sets or returns how a source (new) image are drawn onto a destination (existing) image.

source image = drawings you are about to place onto the canvas.

destination image = drawings that are already placed onto the canvas.

Default value:	source-over
JavaScript syntax:	context.globalCompositeOperation="source-in";

Property Values

Value	Description	Play it
source-over	Default. Displays the source image over the destination image	Play it »
source-atop	Displays the source image on top of the destination image. The part of the source image that is outside the destination image is not shown	Play it »
source-in	Displays the source image in to the destination image. Only the part of the source image that is INSIDE the destination image is shown, and the destination image is transparent	Play it »
source-out	Displays the source image out of the destination image. Only the part of the source image that is OUTSIDE the destination image is shown, and the destination image is transparent	Play it »
destination-over	Displays the destination image over the source image	Play it »
destination-atop	Displays the destination image on top of the source image. The part of the destination image that is outside the source image is not shown	Play it »
destination-in	Displays the destination image in to the source image. Only the part of the destination image that is INSIDE the source image is shown, and the source image is transparent	Play it »
destination-out	Displays the destination image out of the source image. Only the part of the destination image that is OUTSIDE the source image is shown, and the source image is transparent	Play it »
lighter	Displays the source image + the destination image	Play it »
copy	Displays the source image. The destination image is ignored	Play it »
xor	The source image is combined by using an exclusive OR with the destination image	Play it »