rotating lines on canvas

http://stackoverflow.com/questions/11809740/fixed-angle-between-two-lines-which-are-following-the-mouse

by lalatino

HTML

<canvas id="imageView" width="400" height="300"></canvas>

<button onclick="obj.started = false; context.closePath(); context.clearRect(0, 0, canvas.width, canvas.height);">clear canvas</button>

<span id="text"></span>

CSS

#imageView { border: 1px solid #000; }

JavaScript

var canvas, context;
var x, y; // current mouse coordinates

var obj = {
    started: false,
    x: 0,  // clicked x coordinate ,x0
    y: 0,  // clicked y coordinate ,y0
    angle: 20/360*2*Math.PI // 20 degrees in radians
};

function ev_click(ev) {
    if (obj.started) {
        obj.started = false;
        context.closePath();
        //alert('finished');
    } else {
        obj.started = true;
        obj.x = x;
        obj.y = y;
        context.beginPath();
        //context.moveTo(obj.x, obj.y);
        //alert('started');
    }
}


function ev_mousemove(ev) {
    
    if (ev.layerX || ev.layerX == 0) { // Firefox
        x = ev.layerX;
        y = ev.layerY;
    } else if (ev.offsetX || ev.offsetX == 0) { // Opera
        x = ev.offsetX;
        y = ev.offsetY;
    }
    if (obj.started) {
        context.clearRect(0, 0, canvas.width, canvas.height);
        
        var dx = x - obj.x;
        var dy = y - obj.y;
        var len = Math.sqrt(dx*dx+dy*dy);
        var angle = Math.atan2(dy,dx);
        //var angle = Math.atan(dy/dx);
        var angle_left = angle + obj.angle;
        var angle_right = angle - obj.angle;
        //document.getElementById('text').innerHTML = angle_left + ' / ' + angle_right;
        context.beginPath();
        context.moveTo(obj.x + Math.cos(angle_left) * len, obj.y + Math.sin(angle_left) * len);
        context.lineTo(obj.x, obj.y);
        context.lineTo(obj.x + Math.cos(angle_right) * len, obj.y + Math.sin(angle_right) * len);
        context.stroke();
        context.closePath();
    }
}

function init() {
    canvas = document.getElementById('imageView');
    context = canvas.getContext('2d');
    canvas.addEventListener('mousemove', ev_mousemove, false);
    canvas.addEventListener('click', ev_click, false);
}

window.onload = init;