HTML Canvas methods: quadraticCurveTo(), bezierCurveTo()
Table of Contents
HTML Canvas methods:quadraticCurveTo(), bezierCurveTo()
In this lesson we will study some of HTML Canvas methods such as :quadraticCurveTo(), bezierCurveTo() with complete code examples
quadraticCurveTo(cpX, cpY, x, y):
Adds a quadratic Bézier curve to the current path, specified by a control point and an end point.
The quadraticCurveTo(cpX, cpY, x, y) method is used to draw a quadratic Bézier curve on the HTML canvas. It creates a curved line segment between the current position and the specified endpoint (x, y), using a control point (cpX, cpY).
Here’s a breakdown of the parameters:
cpX and cpY: The coordinates of the control point that influences the shape of the curve.
x and y: The coordinates of the endpoint of the curve.
Here’s an example code snippet that demonstrates the usage of quadraticCurveTo(cpX, cpY, x, y):
<!DOCTYPE html>
<html>
<head>
<title>Canvas quadraticCurveTo Example</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
// Get the canvas element
var canvas = document.getElementById("myCanvas");
// Get the 2D rendering context
var ctx = canvas.getContext("2d");
// Define the control point and endpoint
var cpX = 100;
var cpY = 150;
var x = 300;
var y = 150;
// Draw the quadratic curve
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.quadraticCurveTo(cpX, cpY, x, y);
ctx.stroke();
</script>
</body>
</html>
In this example:
1- we create a canvas with a width of 400 pixels and a height of 200 pixels.
2-We get the canvas element using document.getElementById(“myCanvas”).
3-Next, we get the 2D rendering context of the canvas by calling getContext(“2d”) on the canvas object.
This gives us access to the methods and properties for drawing and manipulating graphics.
4-We define the control point as (cpX, cpY) and the endpoint as (x, y).
5-We use ctx.beginPath() to start a new path and ctx.moveTo(50, 50) to move the cursor to the starting point of the curve. Then, we call ctx.quadraticCurveTo(cpX, cpY, x, y) to draw the quadratic Bézier curve. This method takes the control point coordinates (cpX, cpY) and the endpoint coordinates (x, y).
6-Finally, we use ctx.stroke() to stroke, or draw the outline, of the path.
When you run this code, you will see a curved line segment on the canvas, created by the quadratic Bézier curve. The quadraticCurveTo(cpX, cpY, x, y) method allows you to draw smooth curves by specifying a control point that influences the shape of the curve.
bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, x, y):
Adds a cubic Bézier curve to the current path, specified by two control points and an end point.
The bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, x, y) method is used to draw a cubic Bézier curve on the HTML canvas. It creates a curved line segment between the current position and the specified endpoint (x, y), using two control points (cp1X, cp1Y) and (cp2X, cp2Y).
Here’s a breakdown of the parameters:
cp1X and cp1Y: The coordinates of the first control point that influences the shape of the curve.
cp2X and cp2Y: The coordinates of the second control point that influences the shape of the curve.
x and y: The coordinates of the endpoint of the curve.
Here’s an example code snippet that demonstrates the usage of bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, x, y):
<!DOCTYPE html>
<html>
<head>
<title>Canvas bezierCurveTo Example</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
// Get the canvas element
var canvas = document.getElementById("myCanvas");
// Get the 2D rendering context
var ctx = canvas.getContext("2d");
// Define the control points and endpoint
var cp1X = 100;
var cp1Y = 100;
var cp2X = 300;
var cp2Y = 100;
var x = 200;
var y = 150;
// Draw the cubic Bézier curve
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, x, y);
ctx.stroke();
</script>
</body>
</html>
In this example:
1- we create a canvas with a width of 400 pixels and a height of 200 pixels.
2-We get the canvas element using document.getElementById(“myCanvas”).
3-Next, we get the 2D rendering context of the canvas by calling getContext(“2d”) on the canvas object.
This gives us access to the methods and properties for drawing and manipulating graphics.
4-We define the two control points as (cp1X, cp1Y) and (cp2X, cp2Y), and the endpoint as (x, y).
5-We use ctx.beginPath() to start a new path and ctx.moveTo(50, 50) to move the cursor to the starting point of the curve. Then, we call ctx.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, x, y) to draw the cubic Bézier curve. This method takes the two control point coordinates (cp1X, cp1Y) and (cp2X, cp2Y), and the endpoint coordinates (x, y).
6-Finally, we use ctx.stroke() to stroke, or draw the outline, of the path.
When you run this code, you will see a curved line segment on the canvas, created by the cubic Bézier curve. The bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, x, y) method allows you to draw smooth curves by specifying two control points that influence the shape of the curve.
