title: Translate an html5 canvas example to svg
body: <p>I got familiarize with canvas with the help of lot of resources available online, and trying to compare the same with svg. My application needs to draw limited number of shapes, but need to be interactive. I think svg would be more suitable being the shapes are dom elements. it would be great help if someone can translate the canvas example (see <a href="http://jsfiddle.net/Mg3Cc/" rel="nofollow">demo</a>) to svg with only dependency on jQuery and html5 (don't worry about IE)</p>
  
  <p>In the example, I need to draw a rectangle using mouse (left click and drag). you may add each element to the dom  (in canvas I may have to keep an array for the rect object, as the screen clears on each event).</p>
  
  <hr>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="draw.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;canvas id="cvs" height="600" width="800"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
  &lt;    /html&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>$(document).ready(function() {
      var cvs = $("#cvs"),
          ctx = cvs.get(0).getContext("2d");
      var v_bufX, v_bufY, v_bufW, v_bufH;
  
      var box = function ( ctx, style, x, y, w, h ) {        
              ctx.beginPath();
              ctx.rect( x, y, w, h );
              ctx.closePath();
              if ( style.fill ) {
                  ctx.fillStyle = style.fill;
                  ctx.fill();
              }
              if ( style.stroke ) {
                  ctx.strokeStyle = style.stroke;
                  ctx.lineWidth = style.width || 1;
                  ctx.stroke();
              }
          },
          draw = function (res) {
              var style = {fill:'rgba(96,185,206, 0.3)',stroke:'rgb(96,185,206)',width:.5};
              ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); 
              box(ctx, style, res.x, res.y, res.w, res.h);
          };
  
      var rect = {
          reset : function () {
              this.x0 = this.y0 = this.x = this.y = this.w = this.h = -1;
              this.started = this.dragging = false;
          },    
          mousedown : function (e) {
              this.reset();
              this.started = true;
              this.x0 = e._x;
              this.y0 = e._y; 
          },
          mousemove : function (e) {
            if (!this.started) {
              return;     
            }
  
            var x = Math.min(e._x,  this.x0),
                y = Math.min(e._y,  this.y0),
                w = Math.abs(e._x - this.x0),
                h = Math.abs(e._y - this.y0);
           console.log(x, y, w, h);
  
            if (!w || !h) {
            return;       
            };
            this.x = x;
            this.y = y;
            this.w = w;
            this.h = h;
            draw(this);
          },
          mouseup : function (ev) {
            if (this.started) {
              this.mousemove(ev);
              this.started = false;
              draw(this);
            }
          }
      };
  
  
      $(window).mousedown(function(e) {       
          var canvasOffset = cvs.offset();
          e._x = Math.floor(e.pageX-canvasOffset.left); 
          e._y = Math.floor(e.pageY-canvasOffset.top);
          rect.mousedown(e);          
      }); 
      $(window).mousemove(function(e) {
          var canvasOffset = cvs.offset();
          e._x = Math.floor(e.pageX-canvasOffset.left); 
          e._y = Math.floor(e.pageY-canvasOffset.top);
          rect.mousemove(e);
      });
      $(window).mouseup(function(e) {
          var canvasOffset = cvs.offset();
          e._x = Math.floor(e.pageX-canvasOffset.left); 
          e._y = Math.floor(e.pageY-canvasOffset.top);
          rect.mouseup(e);
      });
  });
  </code></pre>