The HTML canvas paths allow you to create custom shapes.
To draw a path use the beginPath(), moveTo(), lineTo(), stroke() methods together.
Example:
<!DOCTYPE html>
<html>
<body>
<canvas id="example-1" width="300" height="150" style="border:1px solid #333;">
</canvas>
<script>
var c = document.getElementById("example-1");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = "4";
ctx.strokeStyle = "#2a9d8f";
ctx.moveTo(30, 75);
ctx.lineTo(250, 75);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "#e76f51";
ctx.moveTo(70, 20);
ctx.lineTo(170, 120);
ctx.stroke();
</script>
</body>
</html>Output:
The HTML canvas beginPath() method starts a path.
Syntax:
context.beginPath();The HTML canvas moveTo() method moves the path to the defined point in the canvas (without creating a line).
Syntax:
context.moveTo(x,y);x – the x-coordinate of where to move the path to.
y – the y-coordinate of where to move the path to.
The HTML canvas lineTo() method adds a new point and creates a line to that point from the last defined point in the canvas (without creating a line).
Syntax:
context.lineTo(x,y);x – the x-coordinate of where to create the line to.
y – the y-coordinate of where to create the line to.
The HTML canvas stroke() method draws the path you have defined with all those beginPath(), moveTo() and lineTo() methods.
Example:
<!DOCTYPE html>
<html>
<body>
<canvas id="example-2" width="300" height="150" style="border:1px solid #333;"></canvas>
<script>
var c = document.getElementById("example-2");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(50, 100);
ctx.lineTo(100, 100);
ctx.strokeStyle = "#2a9d8f";
ctx.stroke();
</script>
</body>
</html>Output:
Note: The default color of a stroke is black. Use the strokeStyle property to draw with another color/gradient.
The HTML canvas fill() method fills the current path.
Example:
<!DOCTYPE html>
<html>
<body>
<canvas id="fillPath" width="200" height="200" style="border:1px solid #333;"></canvas>
<script>
var c = document.getElementById("fillPath");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(50, 50, 100, 100);
ctx.fillStyle = "#e76f51";
ctx.fill();
ctx.beginPath();
ctx.rect(40, 40, 100, 100);
ctx.fillStyle = "#2a9d8f";
ctx.fill();
</script>
</body>
</html>Output:
Note: The default color is black. Use the fillStyle property to fill the path with another color/gradient.
The HTML canvas closePath() method together with the stroke() method draws a path from the current point back to the starting point.
Syntax:
context.closePath();Example:
<!DOCTYPE html>
<html>
<body>
<canvas id="closePath" width="100" height="100" style="border:1px solid #333"></canvas>
<script>
var c = document.getElementById("closePath");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(100, 0);
ctx.lineTo(0, 100);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>Output:
To fill the path use fill() method to fill the drawing (black is the default). Use the fillStyle property to fill with another color/gradient.
Example:
<!DOCTYPE html>
<html>
<body>
<canvas id="close-Path" width="100" height="100" style="border:1px solid #333"></canvas>
<script>
var c = document.getElementById("close-Path");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(100, 0);
ctx.lineTo(0, 100);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.stroke();
ctx.fillStyle = "#2a9d8f";
ctx.fill();
</script>
</body>
</html>Output:
The HTML canvas clip() method clips a region of any shape and size from the original canvas.
Syntax:
context.clip();Example:
<!DOCTYPE html>
<html>
<body>
<span>Without clip():</span>
<canvas id="clipPath" width="200" height="200" style="border:1px solid #333;"></canvas>
<script>
var c = document.getElementById("clipPath");
var ctx = c.getContext("2d");
ctx.rect(50, 50, 100, 100);
ctx.stroke();
ctx.fillStyle = "#2a9d8f";
ctx.fillRect(0, 0, 100, 100);
</script>
<span>With clip():</span>
<canvas id="clip-path" width="200" height="200" style="border:1px solid #333;"></canvas>
<script>
var c = document.getElementById("clip-path");
var ctx = c.getContext("2d");
ctx.rect(50, 50, 100, 100);
ctx.stroke();
ctx.clip();
ctx.fillStyle = "#2a9d8f";
ctx.fillRect(0, 0, 100, 100);
</script>
</body>
</html>Output:
With clip():
The HTML canvas bezierCurveTo() method adds a point to the current path by using the specified control points that represent a cubic Bézier curve.
Syntax:
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);cp1x – the x-coordinate of the first Bézier control point.
cp1y – the y-coordinate of the first Bézier control point.
cp2x – the x-coordinate of the second Bézier control point.
cp2y – the y-coordinate of the first Bézier control point.
x – the x-coordinate of the ending point.
y – the y-coordinate of the ending point.
Example:
<!DOCTYPE html>
<html>
<body>
<canvas id="bezierCurve" width="200" height="200" style="border:1px solid #333;"></canvas>
<script>
var c = document.getElementById("bezierCurve");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.bezierCurveTo(50, 150, 100, 100, 150, 150);
ctx.stroke();
</script>
</body>
</html>
Output:
The HTML canvas quadraticCurveTo() method adds a point to the current path by using the specified control points that represent a quadratic Bézier curve.
Syntax:
context.quadraticCurveTo(cpx,cpy,x,y);cpx – the x-coordinate of the Bézier control point.
cpy – the y-coordinate of the Bézier control point.
x – the x-coordinate of the ending point.
y – the y-coordinate of the ending point.
Example:
<!DOCTYPE html>
<html>
<body>
<canvas id="quadraticCurve" width="200" height="200" style="border:1px solid #333;"></canvas>
<script>
var c = document.getElementById("quadraticCurve");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.quadraticCurveTo(50, 150, 100, 50);
ctx.stroke();
</script>
</body>
</html>Output:
The HTML canvas arc() method draws an arc/curve (used to draw circles or parts of circles).
Syntax:
context.arc(x,y,r,sAngle,eAngle,counterclockwise);x – the x-coordinate of the center of the circle.
y – the y-coordinate of the center of the circle.
r – the radius of the circle.
sAngle – the starting angle.
eAngle – the ending angle.
counterclockwise (optional) – defines whether the drawing should be counterclockwise or clockwise.
Example:
<!DOCTYPE html>
<html>
<body>
<canvas id="circle" width="200" height="200" style="border:1px solid #333;">
</canvas>
<script>
var c = document.getElementById("circle");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.stroke();
</script>
</body>
</html>Output:
The HTML canvas arcTo() method draws an arc/curve between two tangents on the canvas.
Syntax:
context.arcTo(x1,y1,x2,y2,r);x1 – the x-coordinate of the first tangent.
y1 – the y-coordinate of the first tangent.
x2 – the x-coordinate of the second tangent.
y2 – the y-coordinate of the second tangent.
r – the radius of the arc.
Example:
<!DOCTYPE html>
<html>
<body>
<canvas id="arcTo" width="200" height="200" style="border:1px solid #333;"></canvas>
<script>
var c = document.getElementById("arcTo");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(100, 20);
ctx.arcTo(150, 20, 150, 70, 50);
ctx.lineTo(150, 120);
ctx.stroke();
</script>
</body>
</html>Output:
The HTML canvas isPointInPath() method returns true if the specified point is in the current path, otherwise false.
Syntax:
context.isPointInPath(x,y);x – the x-coordinate to test.
y – the x-coordinate to test.
Example:
<!DOCTYPE html>
<html>
<body>
<canvas id="test" width="200" height="200" style="border:1px solid #333;"></canvas>
<script>
var c = document.getElementById("test");
var ctx = c.getContext("2d");
ctx.rect(50, 50, 100, 100);
if (ctx.isPointInPath(50, 50)) {
ctx.stroke();
};
</script>
</body>
</html>
Output:
Enjoy coding!