Path

To draw any path(s) on canvas

  • turned_in_notPath Related Methods
    • moveTo()
    • lineTo()
    • beginPath()
    • closePath()
    • clip()
    • isPointInPath()
    • isPointInStroke()


moveTo( )

Used to create a starting point to begin in the canvas (It's like putting your pencil dot anywhere on a white paper to start something new)

Syntax

ctx.moveTo(x, y)
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.moveTo(10,20);
ctx.lineTo(180,50);
ctx.stroke();
moveTosubject
moveToclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  ctx.moveTo(10,20);
  ctx.lineTo(180,50);
  ctx.stroke();
</script>
</body>
</html>


lineTo( )

Used to add a new point, and defines a line to that point from the last specified point in the canvas, to draw it on canvas, you have to use additional method stroke()

Syntax

ctx.lineTo(x, y)
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.moveTo(0,0);
ctx.lineTo(50,50);
ctx.lineTo(180,50);
ctx.stroke();
lineTosubject
lineToclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  ctx.moveTo(0,0);
  ctx.lineTo(50,50);
  ctx.lineTo(180,50);
  ctx.stroke();
</script>
</body>
</html>


beginPath( )

Used to reset current defined path & start to define new fresh path to draw

In simple words it will reset the stroke() & fill() methods to draw last defined paths or shapes declared before beginPath() method

  • So, you must use this method before you are defining new shapes or paths

Syntax

ctx.beginPath()
for example you have to draw 2 different color of lines
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.strokeStyle="blue";
ctx.moveTo(30,30);ctx.lineTo(100,30);ctx.stroke();
ctx.beginPath();
ctx.strokeStyle="red";
ctx.moveTo(30,50);ctx.lineTo(100,50);ctx.stroke();
beginPathsubject
beginPathclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  ctx.strokeStyle="blue";
  ctx.moveTo(30,30);ctx.lineTo(100,30);ctx.stroke();
  ctx.beginPath();
  ctx.strokeStyle="red";
  ctx.moveTo(30,50);ctx.lineTo(100,50);ctx.stroke();
</script>
</body>
</html>


closePath( )

Used to close the current path, it will join the start & end points of the current path with a straight line

Syntax

ctx.closePath()
  • Must be declared before the stroke() or fill()
  • Used to close the open paths
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.arc(80,50,25,0,1.5*Math.PI);
ctx.closePath();
ctx.stroke();
closePathsubject
closePathclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  ctx.arc(80,50,25,0,1.5*Math.PI);
  ctx.closePath();
  ctx.stroke();
</script>
</body>
</html>


clip( )

Used to show the path or shape area portion (declared after clip) only which are inside the clipped region

  • only works with clipped area declared using defined shape/path methods

Syntax

ctx.clip()
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.rect(20,20,50,50);ctx.stroke();
ctx.clip();
ctx.beginPath();
ctx.arc(60,50,25,0,1.25*Math.PI);
ctx.closePath();
ctx.stroke();
clipsubject
clipclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  ctx.rect(20,20,50,50);ctx.stroke();
  ctx.clip();
  ctx.beginPath();
  ctx.arc(60,50,25,0,1.25*Math.PI);
  ctx.closePath();
  ctx.stroke();
</script>
</body>
</html>


isPointInPath( )

Used to check whether the specified point lies within the area covered by the defined paths/shapes or not

Syntax

ctx.isPointInPath(x, y)
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.rect(20,20,100,50);ctx.stroke();
if(ctx.isPointInPath(25,25)){
  ctx.fillText("true",25,25);
}
isPointInPathsubject
isPointInPathclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  ctx.rect(20,20,100,50);ctx.stroke();
  if(ctx.isPointInPath(25,25)){
    ctx.fillText("true",25,25);
  }
</script>
</body>
</html>


isPointInStroke( )

Used to check whether the specified point lies within the area of the current defined path's stroke or not

Syntax

ctx.isPointInStroke(x, y)
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.rect(20,20,100,50);ctx.stroke();
if(ctx.isPointInStroke(20,20)){
  ctx.fillText("true",20,20);
}
isPointInStrokesubject
isPointInStrokeclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

    ctx.rect(20,20,100,50);ctx.stroke();
  if(ctx.isPointInStroke(20,20)){
    ctx.fillText("true",20,20);
  }
</script>
</body>
</html>


  • Curve
❮ Prev Image
Next ❯Curve
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯