Cursor Move Ball in HTML5

Introduction

In this article, we describe how to create a cursor of a moving ball by using the canvas element of HTML5. First, we create a ball, then apply JavaScript to move the ball with the mouse cursor and then apply CSS to add style. The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.

The canvas element looks a lot like the <img> element, the only difference is that it doesn't have the src and alt attributes. The <canvas> element has only two attributes - width and height. It is always recommended to use an id in canvas to make it easier to identify it in our script.

Step 1 First we create a canvas element in the body and define its id, width, and height. In the body we define an onload method init() also, like this:

<body onload="init();">
<div><h1>HTML5 Canvas Interactive Ball</h1></div>
<canvas id="game" width="1000" height="800" >
</canvas>

Step 2 Then we define the JavaScript init, ev_cursor and create functions.

Init function

This function uses the getElementById method to get the game id and use a and b variable to define the coordinate axis and mA and mB variables to define mouse cursor coordinates. A Delay variable is used to create a delay and a timer variable to create a timer of 10, like this

setInterval(create,10);

We use setInterval to create a loop to call every 20ms and the canvas.addEventListener mousemove event handler.

canvas.addEventListener('mousemove', ev_cursor, false);

Create a function

In this function, we use the canvas.getContext method to return an object that provides methods and properties for drawing, image manipulations on the canvas element. We increment the timer by 1 and use the clearRect method to clear the rectangle and arc method to create the ball, like this:

<script type="text/javascript">
var a=0;
var b=0;
var mA=0;
var mB=0;
var delay=10;
var timer=10;
function init(){
var canvas = document.getElementById('game');
<div></div>
//loop calls create each 20 ms
setInterval(create,10);
canvas.addEventListener('mousemove', ev_cursor, false);
<div></div>
}
function ev_cursor (ev) {
mA = ev.layerX;
mB = ev.layerY;
}
function create(){
var canvas = document.getElementById('game');
if (canvas.getContext){
var c = canvas.getContext('2d');
timer+=1;
c.fillStyle ="Blue";
c.strokeStyle="#000";
delay=20-(mB/100);
accelX=mA-a;
accelY=mB-b;
a+=(accelX)/delay;
b+=(accelY)/delay;
a+=Math.sin(timer)*accelX/5;
b+=Math.sin(timer)*accelY/5;
c.clearRect(0,0,1000,900);
c.beginPath();
c.arc(a,b,100,0,Math.PI*2,true); // 100 is ball size
c.fill();
}
}
</script>

Step 3 We use CSS for describing the the look and formatting to our HTML page, like this:

<style type="text/css">
canvas { border: 1px solid black; }
#game{background:Grey}
</style>

The complete code looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cursor Move Ball </title>
<style type="text/css">
canvas { border: 1px solid black; }
#game{background:Grey}
</style>
<script type="text/javascript">
var a=0;
var b=0;
var mA=0;
var mB=0;
var delay=10;
var timer=10;
function init(){
var canvas = document.getElementById('game');
<div></div>
//loop calls create each 20 ms
setInterval(create,10);
canvas.addEventListener('mousemove', ev_cursor, false);
<div></div>
}
function ev_cursor (ev) {
mA = ev.layerX;
mB = ev.layerY;
}
function create(){
var canvas = document.getElementById('game');
if (canvas.getContext){
var c = canvas.getContext('2d');
timer+=1;
c.fillStyle ="Blue";
c.strokeStyle="#000";
delay=20-(mB/100);
accelX=mA-a;
accelY=mB-b;
a+=(accelX)/delay;
b+=(accelY)/delay;
a+=Math.sin(timer)*accelX/5;
b+=Math.sin(timer)*accelY/5;
c.clearRect(0,0,1000,900);
c.beginPath();
c.arc(a,b,100,0,Math.PI*2,true); // 100 is ball size
c.fill();
}
}
</script>
</head>
<body onload="init();">
<div><h1>HTML5 Cursor Move Ball </h1></div>
<canvas id="game" width="1000" height="800" >
</canvas>
</body>
</html>

Output