Draw lines in a canvas

Simple line drawing panel using Raphael. Basic lines.

by Joey Albert Abano

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.js"></script>
<div>
    <h3>mouse-move-coordinate</h3>
    <div id="mouse-move-coordinate">document: ? canvas: ?</div>
    <h3>mouse-down-coordinate</h3>
    <div id="mouse-down-coordinate">canvas: ?</div>
    <h3>mouse-up-coordinate</h3>
    <div id="mouse-up-coordinate">canvas: ?</div>
</div>    
<div id="canvas-wrap"></div>
<div id="svg-path-string"></div>

CSS

body {
  font-size:12px; 
  font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
}
h1,h2,h3,h4,h5 {
  font-size:12px; font-weight: normal; padding:0px; margin:0px;
}
svg {
  border: solid 1px #ccc;
}
#canvas-wrap, #svg-path-string {
  border: solid 1px #eee;
  float: left;
  height: 240px;
  margin: 0px 12px 0px 0px;   
  width: 320px;
}

JavaScript

var paper_path = '';
window.addEvent('domready', function() {
  var canvaswrap = $('canvas-wrap');
  var canvaspos = canvaswrap.getPosition();
  var paper = Raphael(canvaswrap, 320, 240);    
  document.addEvents({
    'mousemove':function(e) {
      if(e){ e.stop(); }
      this.mousemovecoor = 
        {x:(e.page.x-canvaspos.x),y:(e.page.y-canvaspos.y)};
      var coor_docu = 
      'y:'+e.page.y+',x:'+e.page.x+' ';        
      var coor_canvas = 
      ' cy:'+(e.page.y-canvaspos.y)+',cx:'+(e.page.x-canvaspos.x);
      $('mouse-move-coordinate').set('html',coor_docu+coor_canvas);
      if(this.mousedowncoor) {
        var path_move = 
          'M'+this.mousedowncoor.x+' '+this.mousedowncoor.y;
        var path_line = 
          'L'+this.mousemovecoor.x+' '+this.mousemovecoor.y;
        var path_value = path_move+path_line;
        if(this.ismousedown) { 
            paper.clear();
            paper.path(paper_path);
            paper.path('..'+path_value);                    
        }
      }
    },
    'mousedown':function(e) {
      if(e){ e.stop(); }
      this.ismousedown = true;
      this.mousedowncoor = 
        {x:(e.page.x-canvaspos.x),y:(e.page.y-canvaspos.y)};
      var coor_canvas = 
        'cy:'+(e.page.y-canvaspos.y)+',cx:'+(e.page.x-canvaspos.x);
      $('mouse-down-coordinate').set('html',coor_canvas);
    },
    'mouseup':function(e) {
        if(e){ e.stop(); }
        this.ismousedown = false;
        this.mouseupcoor = 
          {x:(e.page.x-canvaspos.x),y:(e.page.y-canvaspos.y)};
        var coor_canvas = 
          'cy:'+(e.page.y-canvaspos.y)+',cx:'+(e.page.x-canvaspos.x);
        $('mouse-up-coordinate').set('html',coor_canvas);
        var path_move = 
          'M'+this.mousedowncoor.x+' '+this.mousedowncoor.y;
        var path_line = 
          'L'+this.mouseupcoor.x+' '+this.mouseupcoor.y;
        var path_value = path_move+path_line;
        paper_path += path_value;
        paper.clear();
        paper.path(paper_path);       ...