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"
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
  1. < html >  
  2.  <  
  3.  head >  
  4.  <  
  5.  script type = "application/javascript" >  
  6.  function drawBowtie(manish, fillStyle) {  
  7.   manish.fillStyle = "rgba(200,200,200,0.3)";  
  8.   manish.fillRect(-30, -30, 60, 60);  
  9.   manish.fillStyle = fillStyle;  
  10.   manish.globalAlpha = 1.0;  
  11.   manish.beginPath();  
  12.   manish.moveTo(25, 25);  
  13.   manish.lineTo(-25, -25);  
  14.   manish.lineTo(25, -25);  
  15.   manish.lineTo(-25, 25);  
  16.   manish.closePath();  
  17.   manish.fill();  
  18.  }   
  19. function dot(manish) {  
  20.  manish.save();  
  21.  manish.fillStyle = "black";  
  22.  manish.fillRect(-2, -2, 4, 4);  
  23.  manish.restore();  
  24. }  
  25. function draw() {  
  26.  var canvas = document.getElementById("canvas");  
  27.  var manish = canvas.getContext("2d");  
  28.  manish.translate(45, 45);  
  29.  manish.save();  
  30.  drawBowtie(manish, "red");  
  31.  dot(manish);  
  32.  manish.restore(); |  
  33.  manish.save();  
  34.  manish.translate(85, 0);  
  35.  manish.rotate(45 * Math.PI / 180);  
  36.  drawBowtie(manish, "YellowGreen");  
  37.  dot(manish);  
  38.  manish.restore();  
  39.  manish.save();  
  40.  manish.translate(0, 85);  
  41.  manish.rotate(135 * Math.PI / 180);  
  42.  drawBowtie(manish, "MistyRose");  
  43.  dot(manish);  
  44.  manish.restore();  
  45.  manish.save();  
  46.  manish.translate(85, 85);  
  47.  manish.rotate(90 * Math.PI / 180);  
  48.  drawBowtie(manish, "BlanchedAlmond");  
  49.  dot(manish);  
  50.  manish.restore();  
  51. } <  
  52. /script> <   /  
  53. head > <  
  54.  body onload = "draw()" >  
  55.  <  
  56.  canvas id = "canvas"  
  57. width = "300"  
  58. height = "300" > < /canvas>    </body >  
  59.  <  
  60.  /html>      
Output
 
html emage.gif
 
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.
strt.gif
 
vs.gif
 
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
  1. <Window x:Class="manish.MainWindow"  
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="MainWindow" Height="350" Width="525">  
  5.     <Canvas>  
  6.         <Ellipse Canvas.Left="105" Canvas.Top="99" Width="58" Height="58" Fill="Cyan"  />  
  7.         <Path Canvas.Left="61" Canvas.Top="28" Width="133" Height="98" Fill="Blue"   
  8.           Stretch="Fill" Data="M61,125 L193,28"/>  
  9.         <Canvas></Canvas>  
  10.         <Ellipse Fill="YellowGreen"  Width="60" Height="60" Canvas.Left="177" Canvas.Top="20" Canvas.ZIndex="1" />  
  11.         <Ellipse Fill="MistyRose"  Width="60" Height="60" Canvas.Left="50" Canvas.Top="43" />  
  12.         <Canvas>  
  13.             <Ellipse Fill="BlanchedAlmond"  Width="60" Height="60" Canvas.Left="30" Canvas.Top="20"      
  14.              Canvas.ZIndex="1"/>  
  15.         </Canvas>  
  16.         <Ellipse Fill="Purple" Width="60" Height="60" Canvas.Left="161" Canvas.Top="43" />  
  17.         <Ellipse Fill="#FF17DE17" Width="60" Height="60" Canvas.Left="12" Canvas.Top="170"      
  18.              Canvas.ZIndex="1"/>  
  19.         <Ellipse Fill="Blue"  Width="60" Height="60" Canvas.Left="39" Canvas.Top="142"/>  
  20.         <Ellipse Fill="#FFFD27FA" Width="60" Height="60" Canvas.Left="161" Canvas.Top="154"      
  21.              Canvas.ZIndex="1"/>  
  22.         <Ellipse Fill="#FF60A797"  Width="60" Height="60" Canvas.Left="199" Canvas.Top="142"/>  
  23.     </Canvas>  
  24. </Window>  
Output
 
circle.gif
 
Step 6:
Using canvas display the rectangle on a web page
  • Now help with XAML language.
  • First, add canvas on a page.
Code
  1. <Window x:Class="mana.MainWindow"  
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="MainWindow" Height="350" Width="525">  
  5.     <Canvas>  
  6.         <Rectangle Canvas.Left="159" Canvas.Top="78" Width="89" Height="79" Fill="#FF1ED248"  />  
  7.         <Rectangle Canvas.Left="64" Canvas.Top="12" Fill="#FFC41ED2" Height="79" Width="89" />  
  8.         <Rectangle Canvas.Left="112" Canvas.Top="48" Fill="#FF71231E" Height="79" Width="89" />  
  9.         <Rectangle Canvas.Left="238" Canvas.Top="123" Fill="Chocolate" Height="79" Width="89" />  
  10.         <Rectangle Canvas.Left="301" Canvas.Top="161" Fill="#FFC48BF8" Height="79" Width="89" />  
  11.         <Rectangle Canvas.Left="370" Canvas.Top="199" Fill="#FF8D0651" Height="79" Width="89" />  
  12.     </Canvas>  
  13. </Window>  
Output
 
rectengle.gif
 
Step 7:  Show both outputs on the same page
 
Code
  1. <Window x:Class="WpfApplication1.MainWindow"  
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="MainWindow" Height="350" Width="525">  
  5.     <Canvas>  
  6.         <Rectangle Canvas.Left="159" Canvas.Top="78" Width="89" Height="79" Fill="#FF1ED248"  />  
  7.         <Rectangle Canvas.Left="64" Canvas.Top="12" Fill="#FFC41ED2" Height="79" Width="89" />  
  8.         <Ellipse Fill="Purple" Width="60" Height="60" Canvas.Left="188" Canvas.Top="12" />  
  9.         <Ellipse Fill="#FF17DE17" Width="60" Height="60" Canvas.Left="80" Canvas.Top="106"      
  10.              Canvas.ZIndex="1"/>  
  11.     </Canvas>  
  12. </Window>  
Step 8: Press Crtl+F5 to run the application
 
Output
 
 outpot.gif
 
Resources


Similar Articles