Use Canvas Tag in HTML 5

Introduction

 

HTML is an acronym for "HyperText Markup Language" that is used to display data in a browser. HTML 5 is the advanced version of HTML. HTML 5 is used to develop 3D or multimedia applications. This is a simple application developed with HTML 5 and XAML that helps show how to integrate the canvas on your Web application. Mainly Canvas is used to display the data or image on a browser. The HTML5 canvas element uses JavaScript to draw graphics on a web page. A canvas is a rectangular area, and you control every pixel of it. The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images.

 

Step 1: Open Notepad

• Click->Start button->Notepad
• Give the file a name of your choice
• Click New button->save
• There the name is "Joy.html"

 

Step 2: Create a Folder

• Right-click of Desktop Screen-> New-> Folder
• Name of Folder is "Manish"
• Finally all HTML files and related sources are saved in that folder

 

Step 3: Canvas is used to display the graphics using HTML 5 Tools

 

Code

< html >
 <
 head >
 <
 script type = "application/javascript" >
 function drawBowtie(manish, fillStyle) {
  manish.fillStyle = "rgba(200,200,200,0.3)";
  manish.fillRect(-30, -30, 60, 60);
  manish.fillStyle = fillStyle;
  manish.globalAlpha = 1.0;
  manish.beginPath();
  manish.moveTo(25, 25);
  manish.lineTo(-25, -25);
  manish.lineTo(25, -25);
  manish.lineTo(-25, 25);
  manish.closePath();
  manish.fill();
 }
function dot(manish) {
 manish.save();
 manish.fillStyle = "black";
 manish.fillRect(-2, -2, 4, 4);
 manish.restore();
}
function draw() {
 var canvas = document.getElementById("canvas");
 var manish = canvas.getContext("2d");
 manish.translate(45, 45);
 manish.save();
 drawBowtie(manish, "red");
 dot(manish);
 manish.restore(); |
 manish.save();
 manish.translate(85, 0);
 manish.rotate(45 * Math.PI / 180);
 drawBowtie(manish, "YellowGreen");
 dot(manish);
 manish.restore();
 manish.save();
 manish.translate(0, 85);
 manish.rotate(135 * Math.PI / 180);
 drawBowtie(manish, "MistyRose");
 dot(manish);
 manish.restore();
 manish.save();
 manish.translate(85, 85);
 manish.rotate(90 * Math.PI / 180);
 drawBowtie(manish, "BlanchedAlmond");
 dot(manish);
 manish.restore();
} <
/script> <   /
head > <
 body onload = "draw()" >
 <
 canvas id = "canvas"
width = "300"
height = "300" > < /canvas>    </body >
 <
 /html>

Output

 

 

Step 4: Integrating the canvas in a Web application

• Open Visual Studio 2010.
• Click New-> Project-> Web site application.
• The name of the Web site is Tom.

 

 

Step 5: Using the canvas display the circle on a Web page

• Now help with XAML language.
• First, we define the canvas on a web page.

Code

<Window x:Class="manish.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Canvas>
        <Ellipse Canvas.Left="105" Canvas.Top="99" Width="58" Height="58" Fill="Cyan"  />
        <Path Canvas.Left="61" Canvas.Top="28" Width="133" Height="98" Fill="Blue"
          Stretch="Fill" Data="M61,125 L193,28"/>
        <Canvas></Canvas>
        <Ellipse Fill="YellowGreen"  Width="60" Height="60" Canvas.Left="177" Canvas.Top="20" Canvas.ZIndex="1" />
        <Ellipse Fill="MistyRose"  Width="60" Height="60" Canvas.Left="50" Canvas.Top="43" />
        <Canvas>
            <Ellipse Fill="BlanchedAlmond"  Width="60" Height="60" Canvas.Left="30" Canvas.Top="20"
             Canvas.ZIndex="1"/>
        </Canvas>
        <Ellipse Fill="Purple" Width="60" Height="60" Canvas.Left="161" Canvas.Top="43" />
        <Ellipse Fill="#FF17DE17" Width="60" Height="60" Canvas.Left="12" Canvas.Top="170"
             Canvas.ZIndex="1"/>
        <Ellipse Fill="Blue"  Width="60" Height="60" Canvas.Left="39" Canvas.Top="142"/>
        <Ellipse Fill="#FFFD27FA" Width="60" Height="60" Canvas.Left="161" Canvas.Top="154"
             Canvas.ZIndex="1"/>
        <Ellipse Fill="#FF60A797"  Width="60" Height="60" Canvas.Left="199" Canvas.Top="142"/>
    </Canvas>
</Window>

Output

 

 

Step 6: Using canvas display the rectangle on a web page

• Now help with XAML language.
• First, add canvas on a page.

Code

<Window x:Class="mana.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Canvas>
        <Rectangle Canvas.Left="159" Canvas.Top="78" Width="89" Height="79" Fill="#FF1ED248"  />
        <Rectangle Canvas.Left="64" Canvas.Top="12" Fill="#FFC41ED2" Height="79" Width="89" />
        <Rectangle Canvas.Left="112" Canvas.Top="48" Fill="#FF71231E" Height="79" Width="89" />
        <Rectangle Canvas.Left="238" Canvas.Top="123" Fill="Chocolate" Height="79" Width="89" />
        <Rectangle Canvas.Left="301" Canvas.Top="161" Fill="#FFC48BF8" Height="79" Width="89" />
        <Rectangle Canvas.Left="370" Canvas.Top="199" Fill="#FF8D0651" Height="79" Width="89" />
    </Canvas>
</Window>

Output

 

 

Step 7:  Show both outputs on the same page

 

Code

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Canvas>
        <Rectangle Canvas.Left="159" Canvas.Top="78" Width="89" Height="79" Fill="#FF1ED248"  />
        <Rectangle Canvas.Left="64" Canvas.Top="12" Fill="#FFC41ED2" Height="79" Width="89" />
        <Ellipse Fill="Purple" Width="60" Height="60" Canvas.Left="188" Canvas.Top="12" />
        <Ellipse Fill="#FF17DE17" Width="60" Height="60" Canvas.Left="80" Canvas.Top="106"
             Canvas.ZIndex="1"/>
    </Canvas>
</Window>

Step 8: Press Crtl+F5 to run the application

 

Output

 

 

 

Resources

• A Practical look at the HTML5 Canvas tag
• Working With Canvas Tag in HTML5
• Introduction to Page Layout using DIV element
• Creating Anonymous Site using SharePoint Existing Web Application
• Canvas in Silverlight