Point projection

canvas test, single point to a line with only an angle and a length

by rob Davis

HTML

<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
  </body>

CSS

body {
        margin: 0px;
        padding: 0px;
      }

JavaScript

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var width = 500;
var height = 500;
for (var angle=0;angle<360;angle+=15){
    drawLine(width/2,height/2,100,angle);
}

function drawLine(sx,sy,length, angle)
{
    var angleRad = deg2Rad(angle);
    var dx = sx + length*Math.cos(angleRad);
    var dy = sy + length*Math.sin(angleRad);
    context.save();
    context.moveTo(sx, sy);
    context.lineTo(dx, dy);
    context.stroke();
    context.restore();
}

function deg2Rad(deg) {
    return deg * Math.PI / 180;
}