Working With Composites in Canvas Using HTML5

Introduction

In this article, we will discuss how to draw a Clipping Region in a canvas and how you can make it composited with what is already drawn on the canvas in HTML5.

Let's see how the application can be created. To do so use the following steps.

Step 1: Open a HTML editor or Visual Studio 2010.

Open File menu ->select new ->Choose Website

Step 2: Select the Empty Website and Rename it.

Step 3: Then, Go to Solution Explorer

Right-click on the Application name

Select Add-->add new item

Now in the window that opens, select an HTML page.

Canvas Clipping Region

In the canvas, the Default Clipping Area is the size of the canvas, but we can clip a particular area in any shape and in size from the canvas. Once if we clip an area from the canvas, then we only use that clipping area in the future. We can also save the canvas region using the save() method before clipping. We can define the clipping region using HTML5 in the Canvas. To define the clipping region we have to specify the shape and the size of the clipping area.

Example: In this example, we define a rectangularly shaped clipping area with some size and draw three circles in that clipped region.

Here is the code:

<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9Cff98;
}
</style>
<script>
window.onload = function () {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.save();
context.beginPath();
context.rect(40, 20, 180, 150);
context.clip();
// draw blue circle inside clipping region
context.beginPath();
context.arc(90, 80, 50, 0, Math.PI * 2, false);
context.fillStyle = "#ff0000";
context.fill();
// draw yellow circle inside clipping region
context.beginPath();
context.arc(150, 90, 60, 0, Math.PI * 2, false);
context.fillStyle = "#ffff00";
context.fill();
// draw red circle inside clipping region
context.beginPath();
context.arc(200, 80, 60, 0, Math.PI * 2, false);
context.fillStyle = "#ff00ff";
context.fill();
context.restore();
context.beginPath();
context.rect(40, 20, 180, 150);
context.lineWidth = 3;
context.strokeStyle = "black";
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>

Output:

Canvas globalAlpha Attribute

In the canvas, we also use the GlobalAlpha tag. The GlobalAlpha attribute defines the opacity and transparency of our drawings or shapes. GlobalAlpha is specified by giving a value between 1 and 0. The value 0 means that it makes your drawing fully transparent and increasing the value from 0 will decrease the transparency effect you're of the object. To set the Global Alpha with the HTML5 Canvas, we can use the globalAlpha property of the canvas context

Example: In this example, we draw two rectangles, purple and red, where the red rectangle is transparent.

Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="200" style="border:1px solid #d3d3d3;">
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "Purple";
ctx.font = "bold 35px Arial";
ctx.fillText("My Composition", 200, 100);
ctx.fillStyle = "blue";
ctx.globalAlpha = 0.3;
ctx.font = "bold 35px Arial";
ctx.fillText("My composition", 215, 110);
ctx.fillStyle = "Purple";
ctx.fillRect(50, 50, 100, 75);
ctx.fillStyle = "blue";
ctx.globalAlpha = 0.3;
ctx.fillRect(80, 80, 100, 75);
</script>
</body>
</html>