HTML5


An Evolution of the Most Widely used Technology in the World.


Marketplace

A collection of components and scripts based on HTML5.

HTML5

Tutorials and references on the HyperText Markup Language 5.

Javascript

Tutorials and references on the Javascript language.

CSS

Tutorials and references on Cascading Style Sheet.



HTML5 Tags
HTML5 Advance Features

HTML5 Canvas

The <canvas> element, which is part of HTML5 allows scripts to render 2D graphics in a region defined in HTML through a 2D Application Programming Interface (API). Using the <canvas> element, developers will be able to generate graphics, animations, images, graphs or games and build very dynamic and interactive web applications.

Examples

The example below shows the declaration of a <canvas> element in a HTML page. The width of the canvas is 604px and height is 453px.

	  <canvas id="canvas" width="604" height="453" >
	  </canvas>
	  

Canvas Text

The following is an example on how to draw text on the canvas using the Javascript API. The first line in the script gets the canvas context. After setting the font to "Arial" and font size to "30pt", the string "Canvas Text" is drawn on the canvas.

	  <html>
	  <body>
	  <h1>Canvas Text</h1>
	  <canvas id="canvas" width="604" height="453" 
		       style="border:black 1px solid">
	  </canvas>
	  </body>
	  <script type="application/x-javascript">
	  var context
	      =document.getElementById('canvas').getContext('2d');
	  context.font="30pt Arial";
   	  context.fillText("Canvas Text", 180, 80);	
	  </script>
	  </html>
	  
The output is as shown below.


Canvas Rectangle

The following is an example on how to draw a rectangle on the canvas. The line "context.rect(50,50,width,height);" setups a rectangle at a position of 50 pixels from the left and 50 pixels from the top of the canvas. The rectangle is filled with the color "F0F0F0". A border (stroke) is also setup for the rectangle in the next few lines of code.

	  <html>
	  <body>
	  <h1>Canvas Rectangle</h1>
	  <canvas id="canvas" width="604" height="453" 
		       style="border:black 1px solid">
	  </canvas>
	  </body>
	  <script type="application/x-javascript">
	  var context
	      =document.getElementById('canvas').getContext('2d');
	  var width = 604-100;
	  var height = 453-100;
	  context.rect(50,50,width,height);
	  context.fillStyle="F0F0F0";
	  context.fill();
	  context.lineWidth=6;
	  context.strokeStyle="000000"; 
	  context.stroke();	
	  </script>
	  </html>
	  
The output is as shown below.


Canvas Image

The following shows how to draw an image on the canvas. The image "canvas.jpg" is first loaded by the browser. When the image is completely loaded, it is drawn on the canvas using the "onload" function.

	  <html>
	  <body>
	  <h1>Canvas Image</h1>
	  <canvas id="canvas" width="604" height="453" 
		       style="border:black 1px solid">
	  </canvas>
	  </body>
	  <script type="application/x-javascript">
	  var context
	      =document.getElementById('canvas').getContext('2d');
	  var img = new Image();
	  img.src = 'canvas.jpg';
	  img.onload = function(){
	   context.drawImage(img,0,0);
	  }	
	  </script>
	  </html>
	  
The output is as shown below.
The complete canvas examples can be downloaded below:

Canvas Examples


The World Wide Web and Applications Revolution.


Copyright © 2010-2013 html5marketplace.com. All Rights Reserved.

Valid HTML 4.01 Strict

http://www.barcoderesource.com