title: Line of sight from point
body: <p>Need to create simple line of sight from point. Length of this line would be adapt to the size of canvas. If line directed to any object (circle, rectangle etc) it must be interrupted after this. I don't know exactly how to describe this, but behavior should be something like <a href="http://gamemechanicexplorer.com/#raycasting-1" rel="nofollow">this</a>. It's like laser aim in video-games.</p>
  
  <p><a href="https://jsfiddle.net/gzLk7oaz/" rel="nofollow">Demo jsfiddle</a>. Target line has red color. I think that line must have dynamic length depending on where I will direct it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = document.querySelector("canvas");
  canvas.width = 500;
  canvas.height = 300;
  var ctx = canvas.getContext("2d"),
  
  line = {
   x1: 190, y1: 170,
      x2: 0, y2: 0,
      x3: 0, y3: 0
  };
  var length = 100;
  
  var circle = {
   x: 400,
      y: 70
  };
  
  window.onmousemove = function(e) {
    //get correct mouse pos
    var rect = ctx.canvas.getBoundingClientRect(),
        x = e.clientX - rect.left,
        y = e.clientY - rect.top;
  
    // calc line angle
    var dx = x - line.x1,
        dy = y - line.y1,
        angle = Math.atan2(dy, dx);
  
    //Then render the line using 100 pixel radius:
    line.x2 = line.x1 - length * Math.cos(angle);
    line.y2 = line.y1 - length * Math.sin(angle);
    
    line.x3 = line.x1 + canvas.width * Math.cos(angle);
    line.y3 = line.y1 + canvas.width * Math.sin(angle);
   
    // render
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    ctx.beginPath();
    ctx.moveTo(line.x1, line.y1);
    ctx.lineTo(line.x2, line.y2);
    ctx.strokeStyle = '#333';
    ctx.stroke();
    
    ctx.beginPath();
    ctx.moveTo(line.x1, line.y1);
    ctx.lineTo(line.x3, line.y3);
    ctx.strokeStyle = 'red';
    ctx.stroke();
    
    ctx.beginPath();
    ctx.arc(circle.x, circle.y, 20, 0, Math.PI * 2, true);
    ctx.fillStyle = '#333';
    ctx.fill();
    
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>