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

443
Views
How can I draw lines around a circle

lines around a circle

how can I draw lines around a circle using HTMLcanvas? I am more interested on the math.

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

You need to compute the point on the circle and then the point that lies outside of the circle. Then use beginPath, moveTo, lineTo and finally stroke to draw the line.

To compute a point at distance d from a point of coords (x, y) and angle an you can use the following formula:

(x + Math.cos(an) * d, y + Math.sin(an) * d)

Now you compute 2 points, one using d as the radius of the circle, and then d as something bigger than radius, depending on your needs.

I'm assuming that the an is in radians, if it's measured in degrees then you can convert it like this:

const rad = an / 180 * Math.PI

about 4 years ago · Juan Pablo Isaza Report

0

I've cobbled this quickly together:

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

//draw a circle
ctx.fillStyle = '#4A8';
ctx.beginPath();
ctx.arc(250, 250, 50, 0, 6.282);
ctx.fill();

//draw 12 lines
for(let i = 1; i <= 12; i++) {
    let a = 360 / 12 * i
  drawLine(a)
}


function drawLine(angle) {
  /*
  parametric form from wikipedia:
  https://en.wikipedia.org/wiki/Circle#Equations

  x,y are origin, r is radius a is angle
  x = cx + r * cos(a)
  y = cy + r * sin(a)
  */
  
  ctx.beginPath();
  ctx.lineWidth = 2;
  //thanks Radu!
  const rad = angle / 180 * Math.PI

  //250 is the center of the circly both for x & y
  //starting point on the circumfence of the circle
  let x0 = 250 + 50 * Math.cos(rad)
  let y0 = 250 + 50 * Math.sin(rad)
  //endpoint of the stroke further outside with a length of 100
  let x1 = 250 + 100 * Math.cos(rad)
  let y1 = 250 + 100 * Math.sin(rad)
  
  //draw from x0 to x1
  ctx.moveTo(x0, y0);
  ctx.lineTo(x1,y1);
  ctx.strokeStyle = '#ff0000';
  ctx.stroke(); 
}

https://jsfiddle.net/rokt0v51/

Result:

enter image description here

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!