Ethan H
Ethan H

Reputation: 23

Line through a Circle Javascript

Trying to draw a line through a Circle

e.g: https://i.sstatic.net/I8B60.jpg

Here is my code: https://codepen.io/ethan-horrigan/pen/OrRLXx

    var r = 200;
    var x1 = 800 / 2;
    var y1 = 540 / 2;

    var x = r * Math.cos(Math.PI / 180 * 135) + x1;
    var y = r * Math.sin(Math.PI / 180 * 315) + y1;

    ctx.beginPath();
    ctx.arc(x1, y1, r, 0, Math.PI * 2, false);

    ctx.moveTo(x1,y1);
    ctx.lineTo(x, y);
    ctx.stroke();

Upvotes: 0

Views: 65

Answers (2)

user9077625
user9077625

Reputation:

var r = 200;
var x1 = 800 / 2;
var y1 = 540 / 2;

var x = r * Math.cos(Math.PI * .75) + x1;
var y = r * Math.sin(Math.PI * 1.75) + y1;
ctx.beginPath();
ctx.arc(x1, y1, r, Math.PI * .25, Math.PI * 2.25, false);

ctx.lineTo(x, y);
ctx.stroke();

Upvotes: 0

Danny Buonocore
Danny Buonocore

Reputation: 3777

I believe this is what you want:

ctx.moveTo(x, y);
ctx.lineTo(x1 + (x1 - x), y1 + (y1 - y));
ctx.stroke();

Codepen

Upvotes: 3

Related Questions