ARTICLE

Use HTML5 Canvas to Display and Manipulate Image

Posted by Manish Singh Articles | HTML 5 March 22, 2012
This is a simple application for beginners that shows how to display an image on canvas using HTML 5 and CSS tools. We know that HTML 5 is the advanced version of HTML.
Reader Level:
 

Introduction

This is a simple application for beginners that shows how to display an image on canvas using HTML 5 and CSS tools. 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 display an image on canvas applications. CSS is the acronym for Cascading Style Sheet that is used for design. CSS defines how HTML elements are to be displayed. Canvas is an important tag of a HTML 5 that is used to show the image and text in a HTML 5 applications. I hope this article helps to a display an image on canvas using HTML 5 and CSS tools.

Step 1: Open Visual Studio.

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

new.gif

application.gif

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

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

css.gif

html.gif

Step 3:
In this step we add a folder named "image" that is used to store all images. The images are used to display on the canvas.

  • Right-click on the Solution Explorer.
  • Add-> Add New Folder.
  • Set the name of the folder as "image".  

folder.gif

image.gif

iiiiiiiiiiiiiiii.gif

Step 4:
In this section we will be create a function named "draw" used to set an image src and draw a canvas on a page.

Code

<script type="text/javascript">

 function draw()
{

 var rxt = document.getElementById('canvas').getContext('2d');

 var IMG = new Image();

 IMG.src = 'image/untitled.GIF';

 IMG.onload = function()
{

 for (i=0;i<4;i++)
{

 for (j=0;j<3;j++)
{

 rxt.drawImage(IMG,j*200,i*160,300,300);

}

}

}

}

</script>
 

Step 5: Now in this section we apply a style to set a color and text size of a body.

Code

<style type="text/css">

   body { margin: 20px; font-family: arial,verdana,helvetica; background:#66FF99;}

   h1 { font-size: 140%; font-weight:normal; color: #036; border-bottom: 1px solid #ccc; }

   h2 { font-size: 100%; color:Red; }

   canvas { border: 2px solid #66FF99; float: left; margin-right: 20px; margin-bottom: 20px; }

   pre { float:left; display:block; background:#66FF99; border: 1px dashed #66FF99; padding: 15px 20px; margin: 0 0 10px 0; }

</style>


Step 6: In this section we call a draw function on a on-load event of a body and also set a canvas height and width.

Code

<body onload="draw();">

 <h1 style="background-color: #FF99FF">Tom Drow a Image on Canvas</h1>

 <div style="background-color: #CCCCFF">

 <canvas id="canvas" width="500" height="500"></canvas>

 <div style="float:left; background:#66FF99 ">

 <h2>Source image</h2>

 <IMG src="image/untitled.GIF"/>

 </div>

 </div>

</body>
 

body.gif

Step 7:
The complete code demo of a draw image on canvas application is given below.

Code

<html>

 <head>

 <title>Tom application</title>

 <script type="text/javascript">
function
draw()
{
 var rxt = document.getElementById('canvas').getContext('2d');
 var IMG = new Image();
 IMG.src = 'image/untitled.GIF';
 IMG.onload = function()
{
 for (i=0;i<4;i++)
{
 for (j=0;j<3;j++)
{
 rxt.drawImage(IMG,j*200,i*160,300,300);
}
}
}
}
</script>
<style type="text/css">
   body { margin: 20px; font-family: arial,verdana,helvetica; background:#66FF99;}
   h1 { font-size: 140%; font-weight:normal; color: #036; border-bottom: 1px solid #ccc; }
   h2 { font-size: 100%; color:Red; }
   canvas { border: 2px solid #66FF99; float: left; margin-right: 20px; margin-bottom: 20px; }
   pre { float:left; display:block; background:#66FF99; border: 1px dashed #66FF99; padding: 15px 20px; margin: 0 0 10px 0; }
</style
>
<body onload="draw();">
 <h1 style="background-color: #FF99FF">Tom Drow a Image on Canvas</h1>
 <div style="background-color: #CCCCFF">
 <canvas id="canvas" width="500" height="500"></canvas>
 <div style="float:left; background:#66FF99 ">
 <h2>Source image</h2>
 <IMG src="image/untitled.GIF"/>
 </div>
 </div>
</
body
>
</html>

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

Output

out.gif

out3.gif

Resources

Here some useful resources: