Post
Ask Question

Canvas Curves in HTML5

Introduction

 
In this article, we are going to understand various types of curves in the HTML5 Canvas. The canvas provides a bitmap area for drawing of shapes and rendering of images. The HTML5 canvas element uses JavaScript to draw graphics on a web page. 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.
 
This article describes how to implement the Canvas Curves element in your HTML pages. We use some examples that provide some clear ideas of what you can do with the <canvas> and can be used to start building your own implementations.
 
There are 3 types of canvas curves:
  • Arc
  • Quadratic Curve
  • Bezier Curve
Each of these will be discussed in later sections.
 

Canvas Arc

 
An arc is a curve with a fixed radius. In the canvas, we can use arcs to draw circles or combine arcs with lines to construct other shapes. To create an arc we specify the position and other six parameters (center point, a radius, a starting angle, an ending angle, and the drawn direction (either clockwise or counterclockwise) that should be drawn. We will use the fill() or storke() methods to draw the arc on the canvas.
 
Example
 
In this example, we create a simple arc using JavaScript code with HTML.
 
Here is the code:
  1. <html>  
  2.   <head>  
  3.     <style>  
  4.       body {  
  5.         margin: 0px;  
  6.         padding: 0px;  
  7.       }  
  8.       #myCanvas {  
  9.         border: 1px solid #9Cff98;  
  10.       }  
  11.     </style>  
  12.     <script>  
  13.         window.onload = function () {  
  14.             var canvas = document.getElementById("canvas");  
  15.             var context = canvas.getContext("2d");  
  16.             var x = canvas.width / 2;  
  17.             var y = canvas.height / 2;  
  18.             var radius = 80;  
  19.             var startAngle = 2.1 * Math.PI;  
  20.             var endAngle = 2.9 * Math.PI;  
  21.             var counterClockwise = false;  
  22.             context.arc(x, y, radius, startAngle, endAngle, counterClockwise);  
  23.             context.lineWidth =25;  
  24.             // line color  
  25.             context.strokeStyle = "red";  
  26.             context.stroke();  
  27.         };  
  28.     </script>  
  29.   </head>  
  30.   <body>  
  31.     <canvas id="canvas" width="578" height="250"></canvas>  
  32.   </body>  
  33. </html> 
Output:
image 1.jpg
 

Quadratic Curve

 
A quadratic curve has a fixed beginning point, a fixed ending point, and a single control point that acts to create the curve. To create a quadratic curve with the HTML5 Canvas, we can use the quadraticCurveTo() method. Quadratic curves are defined by the context point, a control point, and an ending point.
 
Example: In this example, we create a simple Quadratic Curve using some JavaScript and HTML code.
 
Here is the code:
  1. <html>  
  2.   <head>  
  3.     <style>  
  4.       body {  
  5.         margin: 0px;  
  6.         padding: 0px;  
  7.       }  
  8.       #myCanvas {  
  9.         border: 1px solid #9Cffff;  
  10.       }  
  11.     </style>  
  12.     <script>  
  13.         window.onload = function () {  
  14.             var canvas = document.getElementById("canvas");  
  15.             var context = canvas.getContext("2d");  
  16.             context.moveTo(170, 100);  
  17.             context.quadraticCurveTo(280, 150, 360, 0);  
  18.             context.lineWidth = 15;  
  19.             // line color  
  20.             context.strokeStyle = "green";  
  21.             context.stroke();  
  22.         };  
  23.     </script>  
  24.   </head>  
  25.   <body>  
  26.     <canvas id="canvas" width="578" height="200"></canvas>  
  27.   </body>  
  28. </html> 
Output:
 
image 2.jpg
 

Bezier Curve

 
To create a Bezier curve with the HTML5 Canvas, we can use the bezierCurveTo() method. Bezier curves are defined with the context point, two control points, and an ending point. Unlike quadratic curves, Bezier curves are defined with two control points instead of one, allowing you to create more complex curvatures.
 
Example: In this example, we create a simple Bezier Curve using some JavaScript and HTML code.
 
Here is code:
  1. <html>  
  2.   <head>  
  3.     <style>  
  4.       body {  
  5.         margin: 0px;  
  6.         padding: 0px;  
  7.       }  
  8.       #myCanvas {  
  9.         border: 1px solid #9C98ff;  
  10.       }  
  11.     </style>  
  12.     <script>  
  13.         window.onload = function () {  
  14.             var canvas = document.getElementById("canvas");  
  15.             var context = canvas.getContext("2d");  
  16.             context.moveTo(270, 80);  
  17.             context.bezierCurveTo(270, 25, 400, 25, 400, 190);  
  18.             context.lineWidth = 20;  
  19.             // line color  
  20.             context.strokeStyle = "purple";  
  21.             context.stroke();  
  22.         };  
  23.     </script>  
  24.   </head>  
  25.   <body>  
  26.     <canvas id="canvas" width="578" height="200"></canvas>  
  27.   </body>  
  28. </html>  
Output:
iamge 3.jpg


Similar Articles