Question

I’m trying to develop a small application using html5 and canvas/KineticJS. I’d like to trace a number of rays that start from a 2d point to infinite, just setting a custom angle degree. For example, if I set 90° the app should render four rays (two straight lines, one vertical and one horizontal that meet in my 2d point). If I set 60° I should see 3 straight lines, like an asterisk *

Answer 1

The longest line you’ll ever have to draw is the size of the canvas’s diagonal:

var r = Math.sqrt(Math.pow(canvas.width, 2) + Math.pow(canvas.height, 2));

Use sin and cos to calculate each of your end points at that radius:

var theta = delta * Math.PI / 180.0;
var dx = r * Math.cos(n * theta);
var dy = r * Math.sin(n * theta);

Then, just draw lines from (x, y) to (x + dx, y + dy). Simples.