To set the opacity of elements with the HTML5 Canvas,
we can set the globalAlpha property
to a real number between 0 and 1.
0 is fully transparent and 1 is fully opaque.
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
<!--from w w w. j av a 2 s . co m-->
// draw blue rectangle
context.beginPath();
context.rect(200, 20, 100, 100);
context.fillStyle = 'blue';
context.fill();
// draw transparent red circle
context.globalAlpha = 0.5;
context.beginPath();
context.arc(300, 110, 60, 0, 2 * Math.PI, false);
context.fillStyle = 'red';
context.fill();
</script>
</body>
</html>
The code above is rendered as follows:
To add shadows with the HTML5 Canvas,
we can use the shadowColor, shadowBlur,
shadowOffsetX and shadowOffsetY properties from the canvas context.
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
<!-- w ww. j a v a 2s. c o m-->
context.rect(200, 40, 200, 100);
context.fillStyle = 'red';
context.shadowColor = '#999';
context.shadowBlur = 20;
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.fill();
</script>
</body>
</html>
The code above is rendered as follows:
To define a clipping region using HTML5 canvas,
we can draw a path and then use the clip() method to cut.
Shapes drawn afterwards will be bound inside the clipping region.
We can return to its original state with the restore() method so that further drawings are not bound to the clipping region.
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var offset = 50;
<!--from w w w .j a va2s .c om-->
context.save();
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.clip();
// draw blue circle inside clipping region
context.beginPath();
context.arc(x - offset, y - offset, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'blue';
context.fill();
context.restore();
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.lineWidth = 10;
context.strokeStyle = 'blue';
context.stroke();
</script>
</body>
</html>
The code above is rendered as follows:
To perform a composite operation with HTML5 Canvas,
we can use the globalCompositeOperation property of the canvas context.
This globalCompositeOperation property defines
the composite operation between the source and destination states of the canvas.
We can perform one of the composite operations listed below including
The default composite operation is source-over.
A canvas context can only support one composite operation throughout its life cycle.
The following code uses a hidden canvas and then copy the results onto a visible canvas.
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="400"></canvas>
<canvas id="tempCanvas" width="500" height="400" style="display:none;"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var tempCanvas = document.getElementById('tempCanvas');
var tempContext = tempCanvas.getContext('2d');
<!-- ww w .jav a 2s.c o m-->
var squareWidth = 55;
var circleRadius = 35;
var shapeOffset = 50;
var operationOffset = 150;
var arr = [];
arr.push('source-atop');
arr.push('source-in');
arr.push('source-out');
arr.push('source-over');
arr.push('destination-atop');
arr.push('destination-in');
arr.push('destination-out');
arr.push('destination-over');
arr.push('lighter');
arr.push('darker');
arr.push('xor');
arr.push('copy');
// translate context to add 10px padding
context.translate(10, 10);
// draw each of the operations
for(var n = 0; n < arr.length; n++) {
var thisOperation = arr[n];
tempContext.save();
// clear temp context
tempContext.clearRect(0, 0, canvas.width, canvas.height);
// draw rectangle (destination)
tempContext.beginPath();
tempContext.rect(0, 0, squareWidth, squareWidth);
tempContext.fillStyle = 'blue';
tempContext.fill();
// set global composite
tempContext.globalCompositeOperation = thisOperation;
// draw circle (source)
tempContext.beginPath();
tempContext.arc(shapeOffset, shapeOffset, circleRadius, 0, 2 * Math.PI, false);
tempContext.fillStyle = 'red';
tempContext.fill();
tempContext.restore();
// draw text
tempContext.font = '10pt Verdana';
tempContext.fillStyle = 'black';
tempContext.fillText(thisOperation, 0, squareWidth + 45);
if(n > 0) {
if(n % 4 === 0) {
context.translate(operationOffset * -3, operationOffset);
}
else {
context.translate(operationOffset, 0);
}
}
// copy drawing from tempCanvas onto visible canvas
context.drawImage(tempCanvas, 0, 0);
}
</script>
</body>
</html>
The code above is rendered as follows: