trign

gistfile1.js

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

canvas.width = 300;
canvas.height = 300;

document.body.appendChild(canvas);

ctx.fillStyle = "#000";
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = "#f00";
ctx.fillRect(0, 0, 30, 30);

ctx.fillRect(300 - 30, 300 - 30, 30, 30);

// From center
ctx.strokeStyle = "#0ff";
ctx.beginPath();
ctx.moveTo(15, 15);
ctx.lineTo(300 - 15, 300 - 15);
ctx.stroke();

// In a bit
var dx = (300 - 15) - 15,
    dy = (300 - 15) - 15,
    angle = Math.atan2(dy, dx);

var xo = Math.sin(angle) * 30,
		yo = Math.cos(angle) * 30;

ctx.strokeStyle = "#ff0";
ctx.beginPath();
ctx.moveTo(15 + xo, 15 + yo);
ctx.lineTo(300 - 15 - xo, 300 - 15 - yo);
ctx.stroke();