Introduction

In this article, we draw an Ellipse in HTML.
First, we download the file in the following attachment:
  1. Kinectic_beta.js
These files are added to the project then use the following procedure.
Step 1
Open Visual Studio 2010 and click "File" -> "New" -> "Website...". A window is opened. In this window give the name of your application as "Draw_Ellipse" and then click "Ok".
Step 2
Add a "kinetic_beta.js" file. The project will then have been created; a new window is opened on the right side. This window is called the Solution Explorer. The Solution Explorer contains the js file and HTML file.
explorer.jpg
Coding
Draw_Ellipse.html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. </head>
  6. <body>
  7. <h3> Draw Ellipse in HTML5 </h3>
  8. <div id="container"></div>
  9. <script src="Kinetic_beta.js" type="text/javascript"></script>
  10. <script>
  11. var stage = new Kinetic.Stage({
  12. container: 'container',
  13. width: 308,
  14. height: 200
  15. });
  16. var layer = new Kinetic.Layer();
  17. var ellipse = new Kinetic.Ellipse({
  18. x: stage.getWidth() / 2,
  19. y: stage.getHeight() / 2,
  20. radius: {
  21. x: 120,
  22. y: 70
  23. },
  24. fill: 'blue',
  25. stroke: 'black',
  26. strokeWidth: 4
  27. });
  28. // add the shape to the layer
  29. layer.add(ellipse);
  31. // add the layer to the stage
  32. stage.add(layer);
  33. </script>
  34. </body>
  35. </html>
Output
result.jpg
For more information, download the attached sample application.