W3Schools.com

HTML5 canvas globalCompositeOperation Attribute

HTML5 track Tag Reference HTML5 canvas reference

Example

Draw rectangles using two different globalCompositeOperation values:

source-over
destination-over
Yor browser does not support the canvas tag.

JavaScript:

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

Try it yourself »

Definition and Usage

The globalCompositeOperation attribute specifies how shapes and drawings are positioned onto the canvas.

There are 11 different position values, view all of them at the bottom of this page.

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

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The globalCompositeOperation attribute is supported in all major browsers.

Attribute Values

Note: In the description below, the drawings allready placed onto the canvas are reffered to as destination, and the drawings you are about to place onto the canvas are refferred to as source

Value Description Play it
source-atop Displays the destination, and displays the source on top, but only where both the source and the destination are positioned Play it »
source-in Displays only the source, not the destination, but only where both the source and the destination are positioned Play it »
source-out Displays only the source, not the destination, but only where only the source is postioned Play it »
source-over Default. Displays the source as normal, on top of the destination Play it »
destination-atop Displays the source, and displays the destination on top, but only where both the source and the destination are positioned Play it »
destination-in Displays only the destination, not the source, but only where both the source and the destination are positioned Play it »
destination-out Displays only the destination, not the source, but only where only the destination is positioned Play it »
destination-over Displays both the source and the destination, but with the destination on top Play it »
lighter Displays both the source and the destination, but where both the source and the destination are positioned, the color is displayed as the sum of the source color and the destination color Play it »
copy Displays only the source, not the destination Play it »
xor Displays the source and the destination, but only where both the source and destination are not positioned Play it »

Example

All the globalCompositeOperation attribute values:


Try it yourself »

HTML5 track Tag Reference HTML5 canvas reference

WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Best Hosting Coupons
UK Reseller Hosting
Cloud Hosting
Top Web Hosting
$3.98 Unlimited Hosting
Premium Website Design
WEB BUILDING
Download XML Editor
FREE Website BUILDER
Best Website Templates Top CSS Templates
CREATE HTML Websites
EASY WEBSITE BUILDER
W3SCHOOLS EXAMS
Get Certified in:
HTML, CSS, JavaScript, XML, PHP, and ASP
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
STATISTICS
Browser Statistics
Browser OS
Browser Display
SHARE THIS PAGE