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:

<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9Cff98;
}
</style>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 80;
var startAngle = 2.1 * Math.PI;
var endAngle = 2.9 * Math.PI;
var counterClockwise = false;
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth =25;
// line color
context.strokeStyle = "red";
context.stroke();
};
</script>
</head>
<body>
<canvas id="canvas" width="578" height="250"></canvas>
</body>
</html>

Output:

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:

<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9Cffff;
}
</style>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.moveTo(170, 100);
context.quadraticCurveTo(280, 150, 360, 0);
context.lineWidth = 15;
// line color
context.strokeStyle = "green";
context.stroke();
};
</script>
</head>
<body>
<canvas id="canvas" width="578" height="200"></canvas>
</body>
</html>

Output:

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:

<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C98ff;
}
</style>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.moveTo(270, 80);
context.bezierCurveTo(270, 25, 400, 25, 400, 190);
context.lineWidth = 20;
// line color
context.strokeStyle = "purple";
context.stroke();
};
</script>
</head>
<body>
<canvas id="canvas" width="578" height="200"></canvas>
</body>
</html>

Output: