Categories
HTML JavaScript Web development

HTML Canvas Paths

HTML canvas paths

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:

Without clip():

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!