Change Cursor Over HTML5 Canvas When Dragging The Mouse

Change cursor over HTML5 Canvas when dragging the mouse

Use the :active CSS pseudo-class to change the cursor when the mouse button is down over the element:

#draw:active { 
    cursor: url(image/pencil.cur);
}

Working example: http://jsfiddle.net/nXv63/

When I click on a canvas and drag my mouse, the cursor changes to a text-selection cursor. How can I prevent this?

You can bind a mousedown event in your canvas to prevent default behavior.

Something like:

// with jQuery
$( "#canvasId" ).mousedown(function(event){
    event.preventDefault();
});

// without jQuery
document.getElementById( "canvasId" ).onmousedown = function(event){
    event.preventDefault();
};

Here is the updated fiddle: http://jsfiddle.net/MZ9Xm/1/

You will need to test this to see if there is some side effect in what you are doing.

Change cursor over HTML5 Canvas when dragging in Chrome

Working Fiddle

Add the following for Chrome to turn off text selection while dragging and dropping.

document.onselectstart = function(){ return false; }

This has been answered a few times,

chrome sets cursor to text while dragging, why?

Click and Drag Cursor in Chrome

Change cursor depending on section of canvas

Shapes drawn on the canvas do not individually receive mouse events, so individual shapes cannot receive hover events.

A shape drawn on the canvas can be represented as a set of path commands

A Shape == A set of path commands.

// Example: A set of path commands drawing a triangle
context.beginPath();
context.moveTo(50,50);
context.lineTo(75,100);
context.lineTo(25,100);
context.closePath();

To change cursors when hovering over individual shapes you must do mouse hit-testing versus each shape (versus each path).

You can hit-test a shape (a path) using the isPointInPath method.

To use isPointInPath you must re-issue the path command for a shape (but no need to stroke or fill) and then call isPointInPath with the current mouse coordinates:

// first re-issue the path commands for the shape being tested
// and then test if the mouse is inside the shape using isPointInPath
if( context.isPointInPath(mouseX,mouseY) ){
    alert('The mouse is inside this shape');
}

Here's example code and a Demo:

var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");var cw=canvas.width;var ch=canvas.height;function reOffset(){  var BB=canvas.getBoundingClientRect();  offsetX=BB.left;  offsetY=BB.top;        }var offsetX,offsetY;reOffset();window.onscroll=function(e){ reOffset(); }window.onresize=function(e){ reOffset(); }
var isDown=false;var startX,startY;
var cursors=['default','w-resize','n-resize'];var currentCursor=0;
var shapes=[];shapes.push({  points:[{x:20,y:50},{x:100,y:10},{x:180,y:50},{x:100,y:90}],  cursor:1,});shapes.push({  points:[{x:200,y:50},{x:250,y:150},{x:200,y:250},{x:150,y:150}],  cursor:2,});
for(var i=0;i<shapes.length;i++){  var s=shapes[i];  definePath(s.points);  ctx.stroke();}

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

function definePath(p){  ctx.beginPath();  ctx.moveTo(p[0].x,p[0].y);  for(var i=1;i<p.length;i++){    ctx.lineTo(p[i].x,p[i].y);  }  ctx.closePath();}
function handleMouseMove(e){  // tell the browser we're handling this event  e.preventDefault();  e.stopPropagation();
  mouseX=parseInt(e.clientX-offsetX);  mouseY=parseInt(e.clientY-offsetY);
  // Put your mousemove stuff here  var newCursor;  for(var i=0;i<shapes.length;i++){    var s=shapes[i];    definePath(s.points);    if(ctx.isPointInPath(mouseX,mouseY)){      newCursor=s.cursor;      break;    }  }  if(!newCursor){    if(currentCursor>0){      currentCursor=0;      canvas.style.cursor=cursors[currentCursor];                  }  }else if(!newCursor==currentCursor){    currentCursor=newCursor;    canvas.style.cursor=cursors[currentCursor];                }}

body{ background-color: ivory; }#canvas{border:1px solid red; margin:0 auto; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><h4>Move the mouse over the shapes and the cursor will change.</h4><canvas id="canvas" width=300 height=300></canvas>

Draw on HTML5 Canvas using a mouse

Here is a working sample.

 <html>    <script type="text/javascript">    var canvas, ctx, flag = false,        prevX = 0,        currX = 0,        prevY = 0,        currY = 0,        dot_flag = false;
    var x = "black",        y = 2;        function init() {        canvas = document.getElementById('can');        ctx = canvas.getContext("2d");        w = canvas.width;        h = canvas.height;            canvas.addEventListener("mousemove", function (e) {            findxy('move', e)        }, false);        canvas.addEventListener("mousedown", function (e) {            findxy('down', e)        }, false);        canvas.addEventListener("mouseup", function (e) {            findxy('up', e)        }, false);        canvas.addEventListener("mouseout", function (e) {            findxy('out', e)        }, false);    }        function color(obj) {        switch (obj.id) {            case "green":                x = "green";                break;            case "blue":                x = "blue";                break;            case "red":                x = "red";                break;            case "yellow":                x = "yellow";                break;            case "orange":                x = "orange";                break;            case "black":                x = "black";                break;            case "white":                x = "white";                break;        }        if (x == "white") y = 14;        else y = 2;        }        function draw() {        ctx.beginPath();        ctx.moveTo(prevX, prevY);        ctx.lineTo(currX, currY);        ctx.strokeStyle = x;        ctx.lineWidth = y;        ctx.stroke();        ctx.closePath();    }        function erase() {        var m = confirm("Want to clear");        if (m) {            ctx.clearRect(0, 0, w, h);            document.getElementById("canvasimg").style.display = "none";        }    }        function save() {        document.getElementById("canvasimg").style.border = "2px solid";        var dataURL = canvas.toDataURL();        document.getElementById("canvasimg").src = dataURL;        document.getElementById("canvasimg").style.display = "inline";    }        function findxy(res, e) {        if (res == 'down') {            prevX = currX;            prevY = currY;            currX = e.clientX - canvas.offsetLeft;            currY = e.clientY - canvas.offsetTop;                flag = true;            dot_flag = true;            if (dot_flag) {                ctx.beginPath();                ctx.fillStyle = x;                ctx.fillRect(currX, currY, 2, 2);                ctx.closePath();                dot_flag = false;            }        }        if (res == 'up' || res == "out") {            flag = false;        }        if (res == 'move') {            if (flag) {                prevX = currX;                prevY = currY;                currX = e.clientX - canvas.offsetLeft;                currY = e.clientY - canvas.offsetTop;                draw();            }        }    }    </script>    <body onload="init()">        <canvas id="can" width="400" height="400" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas>        <div style="position:absolute;top:12%;left:43%;">Choose Color</div>        <div style="position:absolute;top:15%;left:45%;width:10px;height:10px;background:green;" id="green" onclick="color(this)"></div>        <div style="position:absolute;top:15%;left:46%;width:10px;height:10px;background:blue;" id="blue" onclick="color(this)"></div>        <div style="position:absolute;top:15%;left:47%;width:10px;height:10px;background:red;" id="red" onclick="color(this)"></div>        <div style="position:absolute;top:17%;left:45%;width:10px;height:10px;background:yellow;" id="yellow" onclick="color(this)"></div>        <div style="position:absolute;top:17%;left:46%;width:10px;height:10px;background:orange;" id="orange" onclick="color(this)"></div>        <div style="position:absolute;top:17%;left:47%;width:10px;height:10px;background:black;" id="black" onclick="color(this)"></div>        <div style="position:absolute;top:20%;left:43%;">Eraser</div>        <div style="position:absolute;top:22%;left:45%;width:15px;height:15px;background:white;border:2px solid;" id="white" onclick="color(this)"></div>        <img id="canvasimg" style="position:absolute;top:10%;left:52%;" style="display:none;">        <input type="button" value="save" id="btn" size="30" onclick="save()" style="position:absolute;top:55%;left:10%;">        <input type="button" value="clear" id="clr" size="23" onclick="erase()" style="position:absolute;top:55%;left:15%;">    </body>    </html>

Change Cursor Over HTML5 Canvas When Dragging The Mouse