title: Drawing a rectangle over an image where I click
body: <p>I have some images in a page, and I want to draw a rectangle in the place where I click to leave it marked. I'm trying to achieve this with a canvas, but I'm not getting anywhere. I can't see the canvas I'm creating anywhere, and of course, not the rectangle either.</p>
  
  <p>This is the code I have so far:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  canvas { 
      position: absolute;
      z-index: 100;
      border:1px solid #000000;
      background-color: red;
  }   
  &lt;/style&gt;
  &lt;script type="text/javascript" src="jquery-1.11.3.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(function() {
      $('img').click(function(e) {
          $('#output_'+this.id).html('X:'+event.offsetX+' Y:'+event.offsetY);
  
           if(!this.canvas) {
               this.canvas = $('&lt;canvas /&gt;')[0];
           }
          var ctx = this.canvas.getContext('2d');
          ctx.drawImage(this, 0, 0, this.width, this.height);
  
          ctx.rect(event.offsetX, event.offsetY, 3, 3);
          ctx.fillStyle = "black";
          ctx.fill();
      });
  
  });
  &lt;/script&gt;
  &lt;pre id="output_1"&gt;&lt;/pre&gt;
  &lt;img id="1" src="Desert.jpg" width="200" height="200"&gt;&lt;/img&gt;
  &lt;pre id="output_2"&gt;&lt;/pre&gt;
  &lt;img id="2" src="Hydrangeas.jpg" width="200" height="200"&gt;&lt;/img&gt;
  </code></pre>