drawing over an Image in HTML5 Canvas while preserving the image

Question

In HTML5 Canvas, what's the simplest way to draw and move a line over an Image (already on the canvas), preserving the image underneath? (e.g. have a vertical line track the mouse X position)

My current canvas:

$(document).ready(function() {
  canvas = document.getElementById("myCanvas");
  context = canvas.getContext("2d");
  imageObj = new Image();

    imageObj.onload = function() { 
    context.drawImage(imageObj, 0,0);  
  }
  imageObj.src = "http://example.com/some_image.png";
  $('#myCanvas').click(doSomething);
});

Answer 1

or just use 2 layers:

1. background layer has image and do not change,
2. top layer has line, what you can clear and redraw it lots of time without affecting background layer.

Answer 2

May this is not an actual answer, just in case you need it (in the future). Working with canvas would be better (and easier) with some library. I have tried EaselJS of CreateJS and find myself loving it. You can have a look at it EaselJS (I have done an example allow drawing and dragging image using EaselJS long time before)