'drawing over an Image in HTML5 Canvas while preserving the image

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);
});
javascripthtmlcanvasdrawing


Solution 1:[1]

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)

Solution 2:[2]

You can get your "crosshairs" by listening to mousemove events and then:

  • clear the canvas
  • draw the image
  • draw your line at the mouse position

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/jEc7N/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:20px; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    ctx.lineWidth=2;

    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var img=new Image();
    img.onload=function(){
        canvas.width=img.width;
        canvas.height=img.height;
        ctx.drawImage(img,0,0);

    }
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png";

    function handleMouseMove(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      ctx.clearRect(0,0,canvas.width,canvas.height);
      ctx.drawImage(img,0,0);
      ctx.beginPath();
      ctx.moveTo(mouseX,0);
      ctx.lineTo(mouseX,canvas.height);
      ctx.moveTo(0,mouseY);
      ctx.lineTo(canvas.width,mouseY);
      ctx.stroke();


    }

    $("#canvas").mousemove(function(e){handleMouseMove(e);});


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Solution 3:[3]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Shinigamae
Solution 2 markE
Solution 3 ViliusL

Related Questions