title: Preview image and canvas
body: <p>The code below allows to click on a canvas with a background image and draw a point. I would like to give the change to the user to change the default image, so I have added an input file element. So go to the snippet and follow this steps:</p>
  
  <ul>
  <li>Step 1: click on the first default image "Ziiweb". The coordinate is
  shown in the textarea.</li>
  <li>Step 2: load/preview a new image using the Browse button, and click on it. As you can see the coordinates of the first image are kept, why?</li>
  </ul>
  
  <p><strong>Hint</strong>: after previewing a new image, and click over it, the function mousedown() is called <em>twice</em>.</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>$.fn.canvasAreaDraw = function (options) {
  
      this.each(function (index, element) {
          init.apply(element, [index, element, options]);
      });
  }
  
  var init = function (index, input, options) {
  
      var points, activePoint, settings;
      var $reset, $canvas, ctx, image;
      var draw, mousedown, stopdrag, move, resize, reset, resot, rightclick, record, previewImage;
  
      mousedown = function (e) {
  
          console.log('mousedown');  
          console.log(points);
          console.log(points.length);
  
          var x, y, dis, lineDis, insertAt = points.length;
  
  
          e.preventDefault();
          if (!e.offsetX) {
              e.offsetX = (e.pageX - $(e.target).offset().left);
              e.offsetY = (e.pageY - $(e.target).offset().top);
          }
          x = e.offsetX;
          y = e.offsetY;
  
          points.splice(insertAt, 0, Math.round(x), Math.round(y));
          activePoint = insertAt;
          $(this).on('mousemove', move);
  
          record();
  
          return false;
      };
  
      record = function () {
          $(input).val(points.join(','));
      };
  
      settings = $.extend({
          imageUrl: $(this).attr('data-image-url')
      }, options);
  
      points = [];  //I expected this to reset the points list!!!, but no.... 
  
      if (!$(this).is('canvas')) {
          $canvas = $('&lt;canvas&gt;');
      } else {
          $canvas = $(this);
      }
  
      ctx = $canvas[0].getContext('2d');
  
      image = new Image();
  
      $(this).prev().prev().val('');
  
      resize = function () {
  
          $canvas.attr('height', image.height).attr('width', image.width);
          draw();
      };
  
      if (settings.imageUrl) {
          image.src = settings.imageUrl;
      } else {
          image.src = options;
      }
  
      $canvas.css({
          background: 'url(' + image.src + ')'
      });
  
      $(input).after('&lt;br&gt;', $canvas);
  
      $(document).ready(function () {
          $canvas.on('mousedown', mousedown);
  
      });
  };
  
  //LOAD IMAGE
  previewImage = function () {
  
      var aux = $(this).prev();
  
      if (this.files &amp;&amp; this.files[0]) {
          var reader = new FileReader();
  
          reader.onload = function (e) {
              aux.canvasAreaDraw(e.target.result);
          }
  
          reader.readAsDataURL(this.files[0]);
      }
  }
  
  $(document).ready(function () {
      $('.canvas-area').canvasAreaDraw();
      $('.imgInp').on('change', previewImage);
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;textarea class="canvas-area" data-image-url="http://www.ziiweb.com/images/logo.png"&gt;&lt;/textarea&gt;
      &lt;input type='file' class="imgInp" id="jander" /&gt;</code></pre>
  </div>
  </div>
  </p>