Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

226
Views
Does ctx.stroke() and ctx.fill() automatically close path in canvas?

Is it necessary to include ctx.closePath() if I am going to use ctx.fill() or ctx.stroke() when drawing paths in canvas?
Here is an example below:

ctx.beginPath()
// point 1
ctx.moveTo(x+0.5,y+0.5)
// point2
ctx.lineTo(x2+0.5, y2+0.5)
// point 3
ctx.lineTo(x3+0.5, y3+0.5)

ctx.closePath() // <--- IS THIS NECESSARY ?
ctx.stroke()
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

The function does what it says, it closes the path, if you want a closed triangle in your example then the closepath() is required, if you want two lines then it's not.

So the answer to your question is: No, stroke() and fill() does not close your path.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

let x = 10;
let y = 10;

ctx.beginPath()
// point 1
ctx.moveTo(x/2+0.5,y/2+0.5)
// point2
ctx.lineTo(x*2+0.5, y*4+0.5)
// point 3
ctx.lineTo(x*3+0.5, y*2+0.5)

ctx.closePath() // <--- IS THIS NECESSARY ?
ctx.stroke()

// New path

x = 50;
y = 20;

ctx.beginPath()
// point 1
ctx.moveTo(x+0.5,y+0.5)
// point2
ctx.lineTo(x*2+0.5, y*4+0.5)
// point 3
ctx.lineTo(x*3+0.5, y*2+0.5)

ctx.stroke()
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!