Create Different Composition on Canvas Using HTML5

Manish Singh
12y
6.4k
0
0

Article

Introduction

This is a simple application for beginners that shows how to use various compositions on canvas using HTML5. We know that HTML 5 is the advanced version of HTML. Basically HTML 5 can be used to develop 3D applications. This article is intended to help with the use of HTML5 tools to use various compositions on a canvas application. <canvas> is an HTML element which can be used to draw graphics using scripting. It can be used to draw graphs to make photo compositions or do simple animations. The <canvas> element is a bitmap drawing API and once you have committed to a set of pixels you are stuck with them. Canvas is an important tag of a HTML 5 that is used to show the image and text in a HTML 5 application. I hope this article helps to create various compositions on canvas using HTML5 tools.

Step 1: First open a HTML editor such as Notepad.

Open start->Notepad.
The name of editor is "canvas".

Step 2: Create a folder on a desktop.

Right-click on desktop->new->Folder.
Name of folder is "joy".

Step 3: Open Visual Studio.

Go to file -> New->Projects.
Crete an ASP. NET Web Application.
Name of "composition.aspx".

Step 4: Add a HTML file to your web application.

Right-click on Solution Explorer.
Add->add new item->HTML form.
The Name of the HTML form is "Demo.html".

Step 5: Now in this step we define a function named drawshape(). In a function we set a rectangle and set a color of a rectengle .

Code

function drawShape()
{

for (i = 0; i < rxt.length; i++)
{

var label = document.createTextNode(rxt[i]);

document.getElementById('lab' + i).appendChild(label);

var canvas = document.getElementById('tut' + i).getContext('2d');

canvas.fillStyle = "green";

canvas.fillRect(15, 15, 70, 70);

canvas.globalCompositeOperation = rxt[i];

canvas.fillStyle = "#ff3399";

canvas.beginPath();

canvas.arc(75, 75, 35, 0, Math.PI * 2, true);

canvas.fill();

}

Step 6: Now in this step we set a structure of a table that used to display a different type of a composition in a formatted way.

Code

<tr>

</td>

</td>

</tr>

<tr>

</td>

</td>

</td>

</tr>

<tr>

</td>

</td>

</tr>

<tr>

</td>

</td>

</td>

</td>

</tr>

</table>

Step 7: Now in this step we set a variable named "rxt" used to set the name of a composition.

Code

var rxt = [

'source-over', 'source-in', 'source-out', 'source-atop',

'destination-over', 'destination-in', 'destination-out',

'destination-atop', 'lighter', 'darker', 'copy', 'xor'

];

Step 8: The complete demonstration of a different composition application is given below.

Code

<html>

<head>

<title>Tom developed html 5 application</title>

var rxt = [

'source-over', 'source-in', 'source-out', 'source-atop',

'destination-over', 'destination-in', 'destination-out',

'destination-atop', 'lighter', 'darker', 'copy', 'xor'

];

</script>

function drawShape()
{

for (i = 0; i < rxt.length; i++)
{

var label = document.createTextNode(rxt[i]);

document.getElementById('lab' + i).appendChild(label);

var canvas = document.getElementById('tut' + i).getContext('2d');

canvas.fillStyle = "green";

canvas.fillRect(15, 15, 70, 70);

canvas.globalCompositeOperation = rxt[i];

canvas.fillStyle = "#ff3399";

canvas.beginPath();

canvas.arc(75, 75, 35, 0, Math.PI * 2, true);

canvas.fill();

}

</head>

<tr>

</td>

</td>

</tr>

<tr>

</td>

</td>

</td>

</tr>

<tr>

</td>

</td>

</tr>

<tr>

</td>

</td>

</td>

</td>

</tr>

</table>

</body>

</html>

Step 9: Press Ctrl + F5 to run the application in a browser.

Output

Resources

Here is some useful resources

Up Next

Ebook Download

View all

New Layout Design using HTML and CSS

Read by 1 people

Download Now!

Learn

View all