Domain Names for sale

HTML5 Canvas : How And What


What Does Canvas Do?

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

1
(<canvas> </canvas>)

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:

1
2
3
	<canvas id="testDesign" width="500" height="600" style="border: 5px red solid"> 
	<p>Your browser does not display HTML5 canvas. Please update to view this design.</p>
	</canvas>

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:

1
2
	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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
	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: 
 
	<script> 
 
		window.onload=function() { 
		var testcanvas=document.getElementById("testDesign"); 
		var testcontext=testcanvas.getContext('2d'); 
 
		// create rectangle 
 
		testcontext.fillStyle='rgb(0,125,125)'; 
		testcontext.fillRect(10,10,250,180); 
 
		// create 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(); 
		} 
	</script>

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:

1
	<canvas id="canvas" width="300" height="250"><a href="link.html">BUTTON</a></canvas>

3. Add the following function into the body tag:

1
	onload="draw()"

4. Insert into the header the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
	<script type="application/javascript:> 
	function draw() { 
	var canvas = document.getElementByID("canvas"); 
	var ctx = canvas.getContent("2d"); 
 
	ctx.fillStyle = "rgb(XXX,XXX,XXX)"; 
	ctx.fillRect (YY, YY, YY, YY); 
 
	context.font = 'bold 12px Times"; 
	context.fillText("x" ZZZ, ZZ); 
	context.fillTexxt("y", AA, AAA)' 
 
	} 
	</script>

5. Replace the “XXX,XXX,XXX” with the RGB color code for the background of your rectangle. Replace “YY,YY,YY,YY” with the coordinates for your button.

6. Replace “bold 12px Times” with the font properties you prefer to use. Replace “ZZZ, ZZ” with the coordinates for the X-axis of your text and “AA AAA” with the coordinates for the Y-axis.

7. Save your document.

HTML5 Canvas Graphing Solutions

With HTML5 Canvas elements you can develop drawing objects dynamically such as visualizing information or data in a graph. HTML5 canvas element makes it easy to draw two dimensional objects with the help of Javascript. Let’s have a look on some of the data graphs made with HTML5 canvas elements.

1. HumbleFinance
HumbleFinance is an opensource data visualization tool written in JavaScript. It uses HTML5 canvas element to produce graphical data. It can be used to display any two 2-D data sets of real numerical data which share the same axis.
Courtesy : http://www.humblesoftware.com/finance/index

2. Graphr
Graphr is a calculator written in JavaScript using HTML5 and the canvas element, with the basic features that every graphing calculator should have.
Courtesy : http://www.graphr.org/

3. Snazzy Animated Pie Chart with HTML5 and jQuery
You can create an interactive pie chart using JavaScript with HTML5 and canvas element, with pleasing animated effects. This kind of thing was practical to do with Flash only but now it can also be done with the latest HTML5 technologies.
Courtesy : http://www.elated.com/res/File/articles/development/javascript/snazzy-animated-pie-chart-html5-jquery/

4. AwesomeJS
AwesomeJS enables you to create simple and usable charts quickly with just a couple of lines of code. It’s a Javascript library based on HTML5 and canvas element.
Courtesy : http://cyberpython.github.com/AwesomeChartJS/

5. Ticker Plot
Ticker Plot is a must-have charting tool for every Web developer who uses charts in their work. It’s another open source project that uses HTML5 canvas element for plotting the graphs of ticker symbols and mouse events on canvas. Ticker Plot is specially designed for stock charts and technical analysis.

We hope that this tutorial helped you with HTML5 canvas a bit. Shout out below for any queries.

 

About Author
Rohit Singhal is a marketing pro working with PixelCrayons, a web development company. The company specializes in ecommerce solutions, CMS solutions, responsive web design implementation, HTML5 Web Development and more.

email