Using HTML 5 draw canvas containing a STAR.

154views

written 5.7 years ago by

• modified 5.6 years ago

HTML 5 Canvas With STAR

The HTML <canvas> element is used to draw graphics using JavaScript.
The <canvas> element act as a container for graphics. But script is actually used to draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
In a program we use following methods & property to draw a STAR :
- getElementById() - HTML DOM method to find the <canvas>element.
- getContext() - Built-in HTML object, with properties and methods for drawing.
- fillStyle - Property that sets the color, gradient or pattern used to fill the drawing.
- beginPath() - Begins a path.
- moveTo(x,y) - Moves the path to the specified point in the canvas, without creating a line.
- lineTo(x,y) - Adds a new point and creates a line to that point from the last specified point in the canvas.
- closePath() - Creates a path from the current point back to the starting point.
- stroke() - Actually draws the graphics star.
- fill() - Fills the graphics with given color value yellow.

Program:

<!DOCTYPE HTML>
<html>
   <head>
      <title>HTML5 Canvas Tag</title>
   </head>
   <body><center>
   <h1>HTML 5 Canvas With STAR</h1>  
      <canvas id="starCanvas" width="300" height="250"></canvas>
      <script>
         var canvas = document.getElementById('starCanvas');
         var ctx = canvas.getContext('2d');
         ctx.fillStyle = "yellow";
         ctx.beginPath();
         ctx.moveTo(108, 0.0);
         ctx.lineTo(141, 70);
         ctx.lineTo(218, 78.3);
         ctx.lineTo(162, 131);
         ctx.lineTo(175, 205);
         ctx.lineTo(108, 170);
         ctx.lineTo(41.2, 205);
         ctx.lineTo(55, 131);
         ctx.lineTo(1, 78);
         ctx.lineTo(75, 68);
         ctx.lineTo(108, 0);
         ctx.closePath();
         ctx.stroke();
         ctx.fill();
      </script>
   </center></body>
</html>

ADD COMMENT EDIT