Post
Ask Question

HTML5 Canvas For Beginners : Part 2

Introduction

 
2Main.png
 
In my previous article, I explained canvas elements, compatibility of browsers and drawing lines. Now in this article we learn about the use of the arc method, quadratic and bezier curves and creating various shapes and so on.
 

Arc

 
In HTML5 Canvas, we can draw an arc using the "arc()" method. The arc() method requires the following six parameters:
  • First, we need the "x" position of the center of the circle.
  • Second, we need the "y" position of the center of the circle.
  • Third, we need the "radius" of the circle.
  • Fourth, we need the "starting angle" of the circle.
  • Fifth, we need an "ending angle" of the circle.
  • And sixth we need the drawing direction of the arc, "false=clockwise" and "true=anti-clockwise..
Now, we know what we need for the arc() method. It now looks like "arc(x, y, radius, startAngle, endAngle, anticlockwise)". We can use the "lineWidth", "lineCap" and "strokeStyle" properties to style an arc.
 
arc2.png
 
Example
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div>  
  4.             <!-- Draw a Canvas -->  
  5.             <canvas id="drawCanvas" width="600" height="500"></canvas>   
  6.             <script>  
  7.                 var drawCanvas = document.getElementById('drawCanvas');  
  8.                 var ctx = drawCanvas.getContext('2d');  
  9.                  
  10.                 ctx.beginPath();  
  11.                 ctx.arc(300, 200, 100, -1.2, Math.PI * 0.4 , true);  
  12.                 ctx.lineWidth = 15;  
  13.                 ctx.strokeStyle = 'blue';  
  14.                 ctx.stroke();  
  15.             </script>   
  16.         </div>  
  17.     </form>  
  18. </body> 
Output: 
 
Capture7.PNG

Bezier Path

 
Creating arc's is really fun but they have their limitations. And, if you want to create anything more complex then we need to use two other curves:
  • Quadratic Curve
  • Bezier Curve
To create a bezier path we need to use control points that define where and how to draw the curves. The Quadratic Curve method has one control point whereas the bezier curve method has two control points. Now let's check out these two methods.
 

Quadratic Curve

 
In HTML5 Canvas, we can create a quadratic curve using the "quadraticCurveTo()" method. To draw a quadratic curve, we need four main parameters:
  • x position of the control point (cpx)
  • y position of the control point (cpy)
  • x position of the end of the path (x)
  • y position of the end of the path (y)
Now it looks like "quadraticCurveTo(cpx, cpy, x, y)" and to style a quadratic curve we can use "lineWidth", "lineCap" and "strokeStyle" properties.
 
quadratic2.png
 
Example
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div>  
  4.             <!-- Draw a Canvas -->  
  5.             <canvas id="drawCanvas" width="600" height="500"></canvas>  
  6.    
  7.             <script>  
  8.                 var drawCanvas = document.getElementById('drawCanvas');  
  9.                 var ctx = drawCanvas.getContext('2d');  
  10.                  
  11.                 ctx.beginPath();  
  12.                 ctx.moveTo(150,160);  
  13.                 // ctx.quadraticCurveTo(cpx, cpy, x, y);  
  14.                 ctx.quadraticCurveTo(280, 0, 400, 160);  
  15.                 ctx.lineWidth = 15;  
  16.                 ctx.strokeStyle = '#00f';  
  17.                 ctx.stroke();  
  18.             </script>  
  19.    
  20.         </div>  
  21.     </form>  
  22. </body> 
Output
 
quadraticExample.PNG
 

Bezier Curve

 
In HTML5 Canvas, we can create a bezier curve using the "bezierCurveTo()" method. It allows the creation of more complex curves than a quadratic curve. Bezier curves have a context point, two control points, and an ending point. Now to draw a bezier curve, we need six main parameters:
  • First, we need the x position of the first control point. (cp1x)
  • Second, we need the y position of the first control point. (cp1y)
  • Third, we need the x position of the second control point. (cp2x)
  • Forth, we need the y position of the second control point. (cp2y)
  • Fifth, we need the x position of the ending path. (x)
  • Sixth, we need the y position of the ending path. (y)
Now we have our bezier curve method that looks like quadraticCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) and to style a bezier curve we can use lineWidth, lineCap and strokeStyle properties.
 
beziercurve.png
 
Example
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div>  
  4.             <!-- Draw a Canvas -->  
  5.             <canvas id="drawCanvas" width="600" height="500"></canvas>  
  6.             <script>  
  7.                 var drawCanvas = document.getElementById('drawCanvas');  
  8.                 var ctx = drawCanvas.getContext('2d');  
  9.                  
  10.                 ctx.beginPath();  
  11.                 ctx.moveTo(75,150);  
  12.                 // ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);  
  13.                 ctx.bezierCurveTo(200, 400, 200, 20, 400, 200);  
  14.                 ctx.lineWidth = 15;  
  15.                 ctx.strokeStyle = '#00f';  
  16.                 ctx.stroke();  
  17.             </script>  
  18.         </div>  
  19.     </form>  
  20. </body>  
  21. </html> 
Output
 
bezierCurveExample.PNG
 

SHAPES

 
In HTML5 we can create various shapes, like rectangle, circle, semicircle or even custom shapes. Now, we learn how to create various types of shapes.
 

Rectangle

 
Now, to draw a rectangle we can use a "rect()" or "fillRect()" method that can create the required shape. If you use the "rect()" method then it will create a rectangle without color but if we use "fillRect()" then it will create a rectangle with a color. We need four parameters to call a "rect()" or "fillRect()" method:
  • x: position from the origin point (Top Left Corner)
  • y: position from the origin point
  • width
  • height
Example
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div>  
  4.             <!-- Draw a Canvas -->  
  5.             <canvas id="drawCanvas" width="600" height="500"></canvas>   
  6.             <script>  
  7.                 var drawCanvas = document.getElementById('drawCanvas');  
  8.                 var ctx = drawCanvas.getContext('2d');  
  9.    
  10.                 ctx.beginPath();  
  11.                 ctx.rect(100, 100, 100, 100);  
  12.                 ctx.lineWidth = 8;  
  13.                 ctx.strokeStyle = "red";  
  14.                 ctx.closePath();  
  15.    
  16.                 ctx.fillRect(300, 100, 100, 100);   //By default Black  
  17.                 ctx.closePath();  
  18.                 ctx.stroke();  
  19.             </script>   
  20.         </div>  
  21.     </form>  
  22. </body> 
Output
 
Capture3.PNG
 

Circle

 
Now, to draw a full arc or a circle we can use the "arc()" method by defining a starting angle as 0 and ending angle as PI * 2.
 
Image
 
Example
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div>  
  4.             <!-- Draw a Canvas -->  
  5.             <canvas id="drawCanvas" width="600" height="500"></canvas>   
  6.             <script>  
  7.                 var drawCanvas = document.getElementById('drawCanvas');  
  8.                 var ctx = drawCanvas.getContext('2d');  
  9.                  
  10.                 ctx.beginPath();  
  11.                 // ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, true);  
  12.                 ctx.arc(300, 200, 100, 0, Math.PI * 2, false);  
  13.                 ctx.fillStyle = 'red';  
  14.                 ctx.fill();  
  15.                 ctx.lineWidth = 6;  
  16.                 ctx.strokeStyle = '#00f';  
  17.                 ctx.stroke();  
  18.             </script>   
  19.         </div>  
  20.     </form>  
  21. </body> 
Output
 
Capture4.PNG
 

Semi-Circle

  
Creating a semicircle in HTML5 canvas is the same as creating a circle. We can use the "arc()" method but here we need to define the ending angle has "PI+startAngle".
Example
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div>  
  4.             <!-- Draw a Canvas -->  
  5.             <canvas id="drawCanvas" width="600" height="500"></canvas>   
  6.              <script>  
  7.                  var drawCanvas = document.getElementById('drawCanvas');  
  8.                  var ctx = drawCanvas.getContext('2d');  
  9.    
  10.                  ctx.beginPath();  
  11.                  ctx.arc(300, 200, 100, 0, Math.PI, true);  
  12.                  ctx.fillStyle = 'red';  
  13.                  ctx.fill();  
  14.                  ctx.lineWidth = 6;  
  15.                  ctx.strokeStyle = '#00f';  
  16.                  ctx.stroke();  
  17.             </script>   
  18.         </div>  
  19.     </form>  
  20. </body>   
Output
Capture5.PNG
 

Custom Shapes

 
This is one of my favorite parts, we can create whatever we want using custom shapes in HTML5 Canvas. We can use methods like "arcTo()", "lineTo()", "bezierCurveTo()" or "quadraticCurveTo()" to build each subpath that creates our shapes. Let us see an example:
 
Image
 
Example
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div>  
  4.             <!-- Draw a Canvas -->  
  5.             <canvas id="drawCanvas" width="600" height="500"></canvas>   
  6.              <script>  
  7.                  var drawCanvas = document.getElementById('drawCanvas');  
  8.                  var ctx = drawCanvas.getContext('2d');  
  9.    
  10.                  ctx.beginPath();  
  11.                  ctx.moveTo(100, 110);  
  12.                  ctx.bezierCurveTo(100, 50, 130, 130, 250, 220);  
  13.                  ctx.bezierCurveTo(150, 140, 320, 230, 310, 100);  
  14.                  ctx.bezierCurveTo(200, 100, 420, 110, 400, 150);  
  15.                  ctx.bezierCurveTo(250, 110, 370, 40, 350, 70);  
  16.                  ctx.bezierCurveTo(300, 5, 150, 30, 260, 40);  
  17.                  ctx.bezierCurveTo(350, 5, 50, 30, 180, 80);  
  18.    
  19.                  ctx.closePath();  
  20.                  ctx.lineWidth = 10;  
  21.                  ctx.strokeStyle = 'green';  
  22.                  ctx.stroke();  
  23.             </script>  
  24.    
  25.         </div>  
  26.     </form>  </body>
Output
 
custom Image.PNG


Similar Articles