News

HTML5 Canvas: Create interactive animations

Inspired by the cool canvas animations of Fornasetti.com, learn some beginner image drawing basics with JavaScript/jQuery events

HTML5canvasMain

Inspired by the cool canvas animations of Fornasetti.com, learn some beginner image drawing basics with JavaScript/jQuery events

HTML5canvasMain

GET THE TUTORIAL CODE

Get started

Fornasetti.com exhibits some lovely interactive animations with HTML5’s <canvas> element, opening to a trio of great examples. Inspired by this more sophisticated work, we’re going right back to basics on using Canvas and some beginner tips for drawing images or sprites on certain events. So let’s get started with simply adding a <canvas> tag to the body of our HTML page – it couldn’t be simpler!

001 <canvas id="myCanvas"></canvas>
002 <div class="header"><h1>HTML5 CANVAS</h1></div>    
003 <div id="clearMe" class="clear"><h2>CLICK</h2></div>

Setting up the styles

You don’t need our header <div> containing our <h1> header, although we’ll use the clearMe <div> later for clearing the Canvas. Notice however, we haven’t set the <canvas> height and width inline properties. Normally you must do this to define size, however we want our canvas to be fullscreen, which we’ll do with JavaScript. First, our core page CSS looks like this:

001 html, body {     
002 margin: 0px;    
003 padding: 0px;    
004 height: 100%;
005 width: 100%;    
006 overflow: hidden;     
007 }    
008 div.header {
009 top: 0px;     
010 left: 30%;    
011 }
012 div.clear {    
013 bottom: 0px;     
014 left: 45%;    
015 }
016 #myCanvas {     
017 background-color: #009681;         
018 display: block;    
019 }    
020 </style>

Find, initialise and resize

In our JavaScript we first find the <canvas> within the DOM using its myCanvas id, before getting the 2D context object required for drawing. Next, as we’ll be drawing an image, we create an Image() object and set the src to our local image path. With those initialised on page load, we can also resize our Canvas to fullscreen using window width and height:

001 <script>     
002 var theCanvas = document.getElementById("myCanvas");    
003 var theContext = theCanvas.getContext("2d");
004 var theImage = new Image();    
005 theImage.src = 'ruler.png';    
006 theCanvas.width = window.innerWidth;    
007 theCanvas.height = window.innerHeight;    

Bind some events

You could now simply use drawImage() on the Context object to draw our image to the Canvas on page load. However we’re going to perform drawing and clearing on cursor events so we’ll use jQuery’s bind to attach click functions to our Canvas and our clear div:

001 $("#myCanvas").bind("click", drawImg);    //Binds click call to canvas    
002 $("#clearMe").bind("click", wipeImg);    //Binds click call to div     

The drawImg() function

Our drawImg() function starts by offsetting x and y coordinates based on the event and half the image width/height. This will be used to draw the image sprite centrally below the cursor. Below this we can call our wipeImg() function, clearing the Canvas before each drawing. Simply omit this if you wish to retain the Canvas content as you draw:

001 function drawImg(event){     
002 var posX = event.clientX – theImage.width / 2;    
003 var posY = event.clientY – theImage.height / 2;
004 wipeImg(); // OPTIONAL! Clears the     canvas before drawing
005 theContext.drawImage(theImage,     posX, posY);
006 };    

The wipeImg() function

To wipe a <canvas> of any drawing, you basically draw a clear rectangle to the drawing Context, covering the whole Canvas element’s width and height. We’ll pop this in our wipeImg() function like so:

001 function wipeImg(){     
002 theContext.clearRect(0, 0, theCanvas.width, theCanvas.height);    
003 };
004 </script>

On mousemove instead?

If you test the page now, the image will draw on clicking the Canvas, wherever that click occurs. It also clears the Canvas before each new click, while clicking the CLICK div also wipes. If you now remove the call to wipeImg() the Canvas will retain each drawing. In addition, if you swap our event binding to mousemove, the image will draw as you hover the Canvas!

001 $("#myCanvas").bind("mousemove", drawImg);    //Binds hover call to canvas     

Learn more in the latest issue of Web Designer

×