Compositing
Next ❯ImageData
- turned_in_notCompositing Related Properties
globalAlphaglobalCompositeOperation
globalAlpha
Used to set or get the alpha value of drawing onto the canvas. Default value is 1.0 (opaque)
- Value range 0.0 (full transparent) - 1.0 (opaque)
Syntax - To set alpha value
ctx.globalAlpha=numberSyntax - To get alpha value
ctx.globalAlphavar canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle="red";ctx.fillRect(10,10,80,40);
ctx.globalAlpha=0.4;
ctx.fillStyle="blue";ctx.fillRect(30,30,80,40);
ctx.fillStyle="teal";ctx.fillRect(50,50,80,40);
globalAlphasubject
globalAlphaclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
<canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
/* Now we code to draw on canvas */
ctx.fillStyle="red";ctx.fillRect(10,10,80,40);
ctx.globalAlpha=0.4;
ctx.fillStyle="blue";ctx.fillRect(30,30,80,40);
ctx.fillStyle="teal";ctx.fillRect(50,50,80,40);
</script>
</body>
</html>globalCompositeOperation
Used to set or get how a new drawing are drawn onto an existing old drawing. Default value is 'source-over'
Syntax - To set global composite
ctx.globalCompositeOperation = "source-over|source-in|source-atop|source-out|destination-over|destination-in|destination-atop|destination-out|lighter|copy|xor"Syntax - To get global composite
ctx.globalCompositeOperationBelow Red rectangle is old drawing (destination) & Green circle is new drawing (source)
ctx.globalCompositeOperation |
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle="red";ctx.fillRect(20,20,60,60);
ctx.globalCompositeOperation="source-over";
ctx.fillStyle="teal";ctx.arc(80,60,30,0,2*Math.PI);ctx.fill();
globalCompositeOperationsubject
globalCompositeOperationclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
<canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
/* Now we code to draw on canvas */
ctx.fillStyle="red";ctx.fillRect(20,20,60,60);
ctx.globalCompositeOperation="source-over";
ctx.fillStyle="teal";ctx.arc(80,60,30,0,2*Math.PI);ctx.fill();
</script>
</body>
</html>source image - new drawing image
destination image - old drawing image
| Value | Description |
|---|---|
| source-over | (Default) Displays the source image over the destination image |
| source-in | Displays only the source image part which is inside the destination image |
| source-atop | Displays the source image (only part under destination image area) with the destination image |
| source-out | Displays only the source image part which is outside the destination image |
| destination-over | Displays the destination image over the source image |
| destination-in | Displays only the destination image part which is inside the source image |
| destination-atop | Displays the destination image (only part under source image area) with the source image |
| destination-out | Displays only the destination image part which is outside the source image |
| lighter | Displays the combination of source & destination image |
| copy | Displays only the source image |
| xor | Displays the xor of source & destination image |
❮ Prev Effects
Next ❯ImageData
So,