HTML5 Canvas Tutorial: Basic Mouse Interaction

HTML5 Canvas Tutorial: Introduction

In developing html5 apps there may come a time when we need to change the color or some other property of an element when the mouse is hovering over it. This is not as easy when using the (very powerful) html5 canvas as with images or svg objects because the entire html5 canvas is the object, therefore we need to add code to determine if the mouse is over an element and also to modify the element when this happens. In this simple html5 canvas tutorial you’ll see how to use JavaScript to do this.

HTML5 Canvas Tutorial: Canvas-Mouse Interaction Steps

To determine if the mouse is over an element we have to:

  1. add a “mousemove” event listener to the canvas
  2. get the mouse position when the event fires
  3. compare the mouse position with the position of the object.

To illustrate this we’ll use a simple rectangle drawn on the canvas (basic canvas drawing) and change the color of the rectangle when the mouse is over it. This rectangle will be drawn on our html5 canvas using the properties of a variable called myRect, this will allow us to modify myRect and then redraw the rectangle using these modified properties.

So first we setup the canvas and draw the rectangle with an initial color of red:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="700" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
var myRect={x:150, y:75, w:50, h:50, color:"red"};
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = myRect.color;
ctx.fillRect(myRect.x, myRect.y, myRect.w, myRect.h);
</script>

</body>
</html>

Now we add the event listener to detect any movement of the mouse on the canvas. When there is movement on the canvas we must also check to see if the mouse is over our rectangle..

c.addEventListener("mousemove", function(e){
if ((e.clientX>=myRect.x)&(e.clientX<=myRect.x+myRect.w)&(e.clientY>=myRect.y)&(e.clientY<=myRect.y+myRect.h)){
myRect.color = "green";}
else{
myRect.color = "red";}
updateCanvas();
}, false);

The function that runs when the event listener fires gets the mouse position (e.clientX and e.clientY above) and checks to see if it is within the bounds of our rectangle using the shown logic evaluation. If the mouse is within the bounds of our rectangle the color of the rectangle is changed to green else it is changed back to red. To show this change we have to then redraw the rectangle using the new properties of myRect, this is done with our updateCanvas function, the definition of which is shown below:

function updateCanvas(){
ctx.fillStyle = myRect.color;
ctx.fillRect(myRect.x, myRect.y, myRect.w, myRect.h);
}

HTML5 Canvas Tutorial: Complete Code

Putting everything together we get the complete code for this html5 canvas tutorial:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="700" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
var myRect={x:150, y:75, w:50, h:50, color:"red"};
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = myRect.color;
ctx.fillRect(myRect.x, myRect.y, myRect.w, myRect.h);

c.addEventListener("mousemove", function(e){
if ((e.clientX>=myRect.x)&(e.clientX<=myRect.x+myRect.w)&(e.clientY>=myRect.y)&(e.clientY<=myRect.y+myRect.h)){
myRect.color = "green";}
else{
myRect.color = "red";}
updateCanvas();
}, false);


function updateCanvas(){
ctx.fillStyle = myRect.color;
ctx.fillRect(myRect.x, myRect.y, myRect.w, myRect.h);
}
</script>

</body>
</html>

The basic principle shown above can be used to modify any property of what you draw on an html5 canvas in relation to user events and can make your apps more dynamic and interactive.

If you liked this html5 canvas tutorial and want to learn more above html5, JavaScript and styling your web apps you canΒ  check out the book below on Amazon or w3schools tutorial, you can also support me by buying something on Amazon through the book link (not necessarily the book itself). Don’t forget to share….Happy Coding πŸ™‚