PageResource.com - Web Development Tutorials

HTML5 Canvas Interactive Tutorial

One of the great things about canvas is the ability to create interactive images without having to use plugins like Flash. You can create very simple interactive features like a slideshow to flip through images or more complex features like games and animations. The amount of scripting you will have to do, depends on the complexity of the interactivity you are interested in creating.

In this tutorial we will create a very simple interactive canvas. First we will create a rectangle with a border. We will use the beginPath(), stoke(), to create the border. We will set the width of the border with lineWidth and color of the border with strokeStyle.

We will let the user change the color of the rectangle using input buttons. We will create four buttons users can use to switch colors. On each of the buttons we will use the onclick event listener to call a specific function to change the color. For example clicking on the Blue button will call the BlueRect() function which will fill the rectangle with blue color. We will also include a button that will clear the canvas by initiating the ImgClr() function.

         -> See live example Here

 
Here is the html for the buttons and along with the functions they trigger.

<input type= "button" value= "Blue" id= "blue" onclick= "BlueRect()" />

<input type= "button" value= "Green" id= "green" onclick= "GreenRect()" />

<input type= "button" value= "Yellow" id= "yellow" onclick= "YellRect()" />

<input type= "button" value= "Red" id= "red" onclick= "RedRect()" />

<input type= "button" value= "Click to clear canvas" id= "clear" onclick= "ImgClr()" />

 

Here is the script for our interactive canvas.

<script>
var canvas=null;
var context=null;
window.onload = function() {
canvas=document.getElementById("drawing");
context=canvas.getContext("2d");
context.beginPath();                                      //This initiates the border
context.rect(100,60,175,70);
context.fillStyle= "#ffffff";
context.fill();
context.lineWidth=1;                                     //This sets the width of the border
context.strokeStyle= "#000000";      //This sets the color of the border
context.stroke();
}

function BlueRect () {
context.fillStyle= "#701be0"; // This changes the rectangle to blue
context.fill();
context.strokeStyle= "#000000";
context.stroke();
}

function GreenRect () {
context.fillStyle= "#1be050";        // This function changes the rectangle to green
context.fill();
context.strokeStyle= "#000000";
context.stroke();
}

function YellRect () {
context.fillStyle= "#fcfc00";       // This function changes the rectangle to yellow
context.fill();
context.strokeStyle= "#000000";
context.stroke();
}

function RedRect () {
context.fillStyle= "#fc0d00";      // This function changes the rectangle to red
context.fill();
context.strokeStyle= "#000000";
context.stroke();
}

function ImgClr () {
context.clearRect(0,0, canvas.width, canvas.height);    //This function clears the whole canvas area
}
</script>

 

Here is what the page looks like when it loads.

Here is what happens when you click on the yellow button.

 
Here is what happens when you click on the clear canvas button.

 
The rectangle disappears. Clicking on any of the other color buttons will redraw the rectangle.

         -> See live example Here

One Response to “HTML5 Canvas Interactive Tutorial”

  1. nissa Says:

    This is really helpful!! Thanks a lot. Could you also do a tutorial on how end user can draw on canvas? Also with the script? I’m stuck with how to make the mousedown, mouseup, etc. work. =(
    Thanks in advance. =)

    [Reply]

Leave a Reply


Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy