1. moveTo(x, y)
The moveTo method moves the current drawing position to the specified point without drawing anything. It's like lifting your pen from the paper and placing it at a new location.
Parameters:
- x: The x-coordinate of the new position.
- y: The y-coordinate of the new position.
Example:
context.moveTo(100, 100); // Move pen to (100, 100)
2. lineTo(x, y)
The lineTo method draws a straight line from the current drawing position to the specified point. It's like drawing a line from where the pen is to a new location.
Parameters:
x: The x-coordinate of the end point of the line.
y: The y-coordinate of the end point of the line.
Example:
context.lineTo(200, 200); // Draw a line to (200, 200)
3. arcTo(x1, y1, x2, y2, radius)
The arcTo method draws an arc that connects the current point to the specified point, using the given radius. It's useful for creating curved paths between two points.
Parameters:
x1: The x-coordinate of the first control point.
y1: The y-coordinate of the first control point.
x2: The x-coordinate of the end point of the arc.
y2: The y-coordinate of the end point of the arc.
radius: The radius of the arc.
Example:
4. bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
The bezierCurveTo method draws a cubic Bézier curve from the current point to the specified end point. It requires two control points to define the shape of the curve.
Parameters:
- cp1x: The x-coordinate of the first control point.
- cp1y: The y-coordinate of the first control point.
- cp2x: The x-coordinate of the second control point.
- cp2y: The y-coordinate of the second control point.
- x: The x-coordinate of the end point of the curve.
- y: The y-coordinate of the end point of the curve.
Example:
context.bezierCurveTo(450, 150, 500, 250, 600, 200); // Draw a bezier curve to (600, 200) with control points (450, 150) and (500, 250)
Putting It All Together: Example
Let's create a simple HTML5 canvas drawing using these methods to create a path:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Path Drawing Example</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="400"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Start drawing path
ctx.beginPath();
// Move pen to starting point
ctx.moveTo(100, 100);
// Draw a line to a point
ctx.lineTo(200, 200);
// Draw an arc to a point
ctx.arcTo(300, 200, 400, 100, 50);
// Draw a bezier curve to a point
ctx.bezierCurveTo(450, 150, 500, 250, 600, 200);
// Stroke the path
ctx.stroke();
</script>
</body>
</html>
This code creates a canvas and draws a path consisting of a line, an arc, and a Bézier curve. You can run this code in a browser to see the resulting drawing.
Understanding these path creation methods is essential for creating complex and visually appealing graphics in web development and computer graphics applications. With practice and experimentation, you can leverage these methods to create intricate shapes and designs.
Practice Excercise Practice now