# 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 »

## Example

All the globalCompositeOperation property values:

Try it yourself »

HTML Canvas Reference

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples