Latest web development tutorials

HTML canvas globalCompositeOperation property

HTML canvas Reference Manual HTML canvas Reference Manual

Examples

GlobalCompositeOperation using different values ​​to draw a rectangle. The red rectangle isthe target image,the blue rectangle isthe source image:

source-over
destination-over
YourbrowserdoesnotsupporttheHTML5canvastag.

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"

Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

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

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


Definition and Usage

globalCompositeOperation property sets or returns how a source (new) image is rendered to the target (existing) on ​​the image.

= Source image you intend to place the drawing canvas.

Target = You have the image placed on the drawing canvas.

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

Property Value

描述
source-over 默认。在目标图像上显示源图像
source-atop 目标图像顶部显示源图像源图像位于目标图像之外的部分是不可见的。
source-in 目标图像中显示源图像 。只有目标图像之内的源图像部分会显示, 目标图像是透明的。
source-out 目标图像之外显示源图像 。只有目标图像之外的源图像部分会显示, 目标图像是透明的。
destination-over 源图像上显示目标图像
destination-atop 源图像顶部显示目标图像目标图像位于源图像之外的部分是不可见的。
destination-in 源图像中显示目标图像 。只有源图像之内的目标图像部分会被显示, 源图像是透明的。
destination-out 源图像之外显示目标图像 。只有源图像之外的目标图像部分会被显示, 源图像是透明的。
lighter 显示源图像 + 目标图像
copy 显示源图像 。忽略目标图像
xor 使用异或操作对源图像目标图像进行组合。

Examples

All globalCompositeOperation property values:


try it"


HTML canvas Reference Manual HTML canvas Reference Manual