CODEWITHSUNDEEP
javascripthtmlcanvas
Jon Cursi
Jon Cursi

Reputation: 3371

HTML5 Canvas: Replace Cursor with Crossing Lines

I'm trying to replace my cursor within the canvas with two perpendicular lines: one horizontal and one vertical. Example here: https://i.sstatic.net/4drxz.jpg

I need to do three things

1) Hide the cursor

2) Draw the crossing lines

3) Erase old lines on mouse move and draw new lines based on new mouse location

The following code is a non-performant way of achieving #2 and #3 (it's incredibly slow re-rendering the entire canvas every time the mouse moves):

  function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
  }
  canvas.addEventListener('mousemove', function(evt) {
    // clear the canvas
    ctx.clearRect(0, 0, xsize, ysize);
    // re-draw the base
    drawCanvas();
    var mousePos = getMousePos(canvas, evt);
    // draw vertical line
    ctx.beginPath();
    ctx.moveTo(mousePos.x,0);
    ctx.lineTo(mousePos.x,ysize);
    ctx.stroke();
    ctx.closePath();
    // draw horizontal line
    ctx.beginPath();
    ctx.moveTo(0,mousePos.y);
    ctx.lineTo(xsize,mousePos.y);
    ctx.stroke();
    ctx.closePath();
  }, false);

So my questions:

1) How do I hide the cursor but still display the lines?

2) Is there a way I can just re-render the crossing lines ONLY, rather than the whole canvas every time the mouse moves? Thanks!

Upvotes: 2

Views: 3131

Answers (2)

markE
markE

Reputation: 105015

Here's one way to create a custom cursor and maintain performance:

  • Create a second canvas on top of your main drawing canvas.

  • Hide the system mouse cursor on both the canvases.

  • Draw/Move your X-cursor and nothing else on the top canvas

enter image description here

Example code and a Demo: http://jsfiddle.net/m1erickson/abokzhn6/

<!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; }
    #wrapper{position:relative;}
    #canvas,#cursor{position:absolute; cursor:none;}
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("cursor");
    var ctx=canvas.getContext("2d");
    var $canvas=$("#cursor");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

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


    function handleMouseMove(e){
      e.preventDefault();
      e.stopPropagation();

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

      ctx.clearRect(0,0,canvas.width,canvas.height);
      ctx.beginPath();
      ctx.moveTo(mouseX,mouseY-15);
      ctx.lineTo(mouseX,mouseY+15);
      ctx.moveTo(mouseX-15,mouseY);
      ctx.lineTo(mouseX+15,mouseY);
      ctx.stroke();
    }


}); // end $(function(){});
</script>
</head>
<body>
    <div id='wrapper'>
        <canvas id="canvas" width=300 height=300></canvas>
        <canvas id="cursor" width=300 height=300></canvas>
    </div>
</body>
</html>

Upvotes: 3

Bartek Kosa
Bartek Kosa

Reputation: 842

Ad 1

I didn't test it but I think that you can hide cursor by changing cursor image in CSS to white 1x1 image.

Ad 2

Use http://kineticjs.com/

Upvotes: 0

Related Questions