Working With Composites in Canvas Using HTML5

Gaurav Gupta
12y
4.5k
0
0

Article

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 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>

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>

</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 your of 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>

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>

Up Next

Ebook Download

View all

New Layout Design using HTML and CSS

Read by 1 people

Download Now!

Learn

View all