Reader Level:
ARTICLE

Use Canvas Tag in HTML 5

Posted by Manish Singh Articles | HTML 5 January 10, 2012
This is a simple application developed with HTML 5 and XAML that helps show how to integrate the canvas on your Web application.
  • 0
  • 0
  • 4526

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"

notepad.gif


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

folder.gif


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

html emage.gif


Step 4 :
Integrating the canvas in a Web application

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

strt.gif

vs.gif


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

  • Now help on 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
 

circle.gif

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

  • Now help on 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

rectengle.gif

Step 7 : 
Show both output on a 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

 outpot.gif

Resources

COMMENT USING

Trending up