HTML5 Canvas : How And What

By /

Canvas is a new element in HTML5 that allows you to draw graphics using JavaScript. Canvas can be used for adding graphics, graphs, or any other visual images. It can be used to create photo-effects and animations. You can create rich Web applications with canvas once you have a full command over it, and to work like a master with canvas you should have a good command over JavaScript.This post is designed as a basic tutorial through which you can learn various designing methods with HTML5 canvas such as Button Designing and Graph Designing.

Design With HTML5 Canvas

Design and development of a Web page includes many things – such as display of a Web page is controlled by HyperText Markup Language (HTML) for which HTML Web standards are developed by World Wide Web Consortium (W3C). The HTML5 standards add backing for a canvas tag which creates a space to design with JavaScript. They can be coded such that they allow the user to move, rotate and resize elements, hence for the designs to display, the users must have a HTML5-supported Web browser.

Instructions

Create an HTML Document and Add the Canvas Tag

1. Create an HTML document. Set the document type tag for HTML5 ().

2. Add the open and close canvas tags

(
)

within the body tag of the HTML code.

3. Identify the canvas using the ID attribute. Change the canvas width and height attributes, if you want to a design in a size other than the default 300 pixels wide by 150 pixels high. Add a statement to display when a browser does not support the canvas tag, such as, “

Your browser does not display HTML5 canvas. Please update to view this design.

.”

The following is an example of the code:

Your browser does not display HTML5 canvas. Please update to view this design.

You have now created a simple Web page that includes an empty HTML5 canvas. To create your design, you’ll need to use Javascript and HTML5 canvas methods.

Add Javascript Using HTML5 Canvas Methods

4. Add Javascript to set the canvas variable and drawing context:

        var testcanvas=document.getElementById("testDesign"); 
        var testcontext=testcanvas.getContext('2d');

5. Add Javascript to set the drawing context.

6. Add Javascript to create your design elements. You can create rectangles, circles and triangles, and use lines, transparencies and gradients to create your design.

Here’s an example of the code for a rectangle:

        testcontext.fillStyle='rgb(0,125,125)'; 
        testcontext.fillRect(10,10,250,180); 

        Here is example code for a circle: 

                testcontext.beginPath(); 
                testcontext.arc(300, 340, 100, 0, Math.PI * 2, true); 
                testcontext.closePath(); 
                testcontext.fillStyle='rgb(75,10,125)'; 
                testcontext.fill(); 
                testcontext.stroke(); 

        The completed script will look similar to the following:

7. Test your design by opening in a Web browser that supports HTML5. Optionally, test that unsupported browsers display that message by opening in browser that does not support HTML5.

Create Buttons With HTML5 Canvas

A button can be created using canvas features by creating a box that contains text. HTML5 canvas allows you to create graphic shows button functionality without the need of an image file. Let’s see how:

Instructions:

1. Open your HTML 5 document in Notepad and scroll down to where you want to use your button.

2. Type the following code into the body of your HTML5 page, where you want your canvas to be displayed, replacing “BUTTON” with the text to display and “link” with the link:

BUTTON

3. Add the following function into the body tag:

        onload="draw()"

4. Insert into the header the following code:
Scroll to Top