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
notepad.gif
Step 2: Create a 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
strt.gif
vs.gif
Step 5: Using the canvas display the circle 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
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