Line algorithm

by rajeshpillai

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>test</title>
        <script type="text/javascript">
    function initDraw(){
        var canvas=document.getElementById("canvas");
        position(canvas, 25, 25);
        position(canvas, 300, 300);
        var start = {x: 75, y: 75}
        var end = {x: 350, y: 350}
        var ctx = canvas.getContext("2d");
        arrow(ctx,start,end,10);
    }
    function position(canvas, x, y){
          if(!canvas.getContext){return;}
          var ctx=canvas.getContext("2d");
        ctx.save();
        ctx.translate(x, y);
        draw(ctx);
        ctx.restore();        
    }

    function draw(ctx){
        ctx.fillStyle = "yellow";
           ctx.fillRect(0, 0, 50, 50);
        ctx.strokeStyle = "black";
        ctx.strokeRect(0, 0, 50, 50);
        ctx.stroke();
    }

    function arrow(ctx,p1,p2,size){
        ctx.save();
        var points = edges(ctx,p1,p2);
        if (points.length < 2) 
        return p1 = points[0], p2=points[points.length-1];

        // Rotate the context to point along the path
        var dx = p2.x-p1.x, dy=p2.y-p1.y, len=Math.sqrt(dx*dx+dy*dy);
        ctx.translate(p2.x,p2.y);
        ctx.rotate(Math.atan2(dy,dx));

        // line
        ctx.lineCap = 'round';
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(-len+2,0);
        ctx.closePath();
        ctx.stroke();

        // arrowhead
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(-size,-size);
        ctx.lineTo(-size, size);
        ctx.closePath();
        ctx.fill();

        ctx.restore();
    }

    // Find all transparent/opaque transitions between two points
    // Uses http://en.wikipedia.org/wiki/Bresenham's_line_algorithm
    function edges(ctx,p1,p2,cutoff){
        if (!cutoff) cutoff = 220; // alpha threshold
        var dx = Math.abs(p2.x - p1.x), dy = Math.abs(p2.y - p1.y),
        sx =...