HTML5 - SPLessons
SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

HTML5 Canvas

HTML5 Canvas

shape Introduction

HTML5 Canvas gives some exciting advantages to HTML coding. Canvas is used to design graphics on web pages.HTML5 Canvas Tutorial covers the following concepts.
  • HTML Canvas
  • Examples of Canvas

HTML Canvas

shape Description

The main use of HTML5 Canvas element is to design graphics using Scripting. This element is only a container of graphics. So it must use a script in order to design the graphics. There are various methods for designing circles, Rectangles, Lines and images. All the attributes are supported by HTML5 mainly height and width are useful for adjusting Names, Id and Classes etc. The for the Syntax for the Canvas Element as shown below.
<canvas id="my canvas" width="150" height="150"></canvas>

Browser Support

shape Description

Following are the browser versions supported by HTML5 Canvas Elements.

Examples of Canvas

shape Description

There are various methods for designing circles, lines, rectangles. texts, images etc.

Rectangle

shape Description

The below code demonstrates designing a rectangle area on an HTML page without using scripting language. Here height and width attributes defines size of the rectangle. [html]<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="250" height="150" style="border:3px solid #2E2EFE;"> Your browser does not support the HTML5 canvas tag. </canvas> </body> </html> [/html] Result By running the above code in a preferred browser following output appears. Now, Add JavaScript for the code as shown below. [html]<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="250" height="150" style="border:2px solid #2E2E2E;"> Your browser does not support the HTML5 canvas tag. </canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF4000"; ctx.fillRect(0,0,200,100); </script> </body> </html> [/html] Result By running the above code in a preferred browser following output appears. Following are the three methods to draw a rectangle in canvas. x,y defines position on the Canvas for all the three methods. The code below demonstrate the use of all the 3 methods. [html]<!DOCTYPE HTML> <html> <head> <style> #test { width: 200px; height:200px; margin: 0px auto; } </style> <script type="text/javascript"> function drawShape(){ // Get the canvas element using the DOM var canvas = document.getElementById('rectangle'); // Make sure we don't execute when canvas isn't supported if (canvas.getContext){ // use getContext to use the canvas for drawing var ctx = canvas.getContext('2d'); // Draw shapes ctx.fillRect(25,25,200,200); ctx.clearRect(45,45,60,60); ctx.strokeRect(50,50,50,50); } else { alert('You need Safari or Firefox 1.5+ to see this demo.'); } } </script> </head> <body id="test" onload="drawShape();"> <canvas id="rectangle"></canvas> </body> </html> [/html] Result By running the above code in a preferred browser following output appears.

Lines

shape Description

The code below demonstrates drawing a Line using Canvas animation elements in HTML5. [html]<!DOCTYPE html> <html> <body> <canvas id="rectangle" width="200" height="100" style="border:2px solid #FE642E;"> Your browser does not support the HTML5 canvas tag.</canvas> <script> var c = document.getElementById("rectangle"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); </script> </body> </html> [/html] Result By running the above code in a preferred browser following output appears.

Circle

shape Description

The code below demonstrates drawing a Circles using Canvas animation elements in HTML5. [html]<!DOCTYPE html> <html> <body> <canvas id="circle" width="200" height="100" style="border:2px solid #2E2EFE;"> Your browser does not support the HTML5 canvas tag.</canvas> <script> var c = document.getElementById("circle"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); </script> </body> </html> [/html] Result By running the above code in a preferred browser following output appears.

Text

shape Description

User can design different types of text with various styles, font, sizes. Following are the some of the properties of text.
  • Font [ = value] The attribute provides current font and also user can change to required font.
  • textAlign [ = value] The attribute provides current text alignment and user can change to required text alignment.
  • TextBaseline[ = value] The attribute provides current baseline alignment of the text user can change to required base alignment.
  • fillText(text, x, [ , maxWidth ] ) Is used to fill the text at the given position and Position should be given in x, y coordinates.
  • strokeText( text, x, y [ , maxWidth] ) Is used to stroke the text at the given position and Position should be given in x, y coordinates.
The code below demonstrates designing text by using all the above methods. [html]<!DOCTYPE HTML> <html> <head> <style> #test { width: 100px; height:100px; margin: 0px auto; } </style> <script type="text/javascript"> function drawShape(){ var canvas = document.getElementById('text'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.fillStyle = '#FF0000'; ctx.font = 'Italic 30px Sans-Serif'; ctx.textBaseline = 'Top'; ctx.fillText ('splessons!', 40, 100); ctx.font = 'Bold 30px Sans-Serif'; ctx.strokeText('splessons!', 40, 50); } else { alert('You need Safari or Firefox 1.5+ to see this demo.'); } } </script> </head> <body id="test" onload="drawShape();"> <canvas id="text"></canvas> </body> </html> [/html] Result By running the above code in a preferred browser following output appears.

image

shape Description

User can draw different types of images in various ways the code below demonstrates to draw an image. [html]<!DOCTYPE html> <html> <body> <p>Image to use:</p> <img id="splessons" src="splessons.jpg" alt="splessons" width="220" height="277"> <p>Canvas to fill:</p> <canvas id="image" width="250" height="300" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> <p><button onclick="image()">Try it</button></p> <script> function image() { var c = document.getElementById("image"); var ctx = c.getContext("2d"); var img = document.getElementById("splessons"); ctx.drawImage(img,10,10); } </script> </body> </html [/html] Result By running the above code in a preferred browser following output appears.

Shadow

shape Description

User can design different types of image shadows in various ways the code below demonstrates to draw an image. [html]<!DOCTYPE HTML> <html> <head> <style> canvas { border:1px solid #2C2C2B; /* 1px border around canvas */ } </style> </head> <body> <canvas id="Canvas" width="550" height="280"></canvas> <script> var canvas = document.getElementById('Canvas'); var context = canvas.getContext('2d'); context.shadowBlur=15; context.shadowColor='#000000'; context.shadowOffsetX=10; // offset along X axis context.shadowOffsetY=-10; // offset along Y axis context.fillStyle='#0000FF'; context.fillRect(70,20,400,200); //rectangle </script> </body> </html> [/html] Result By running the above code in a preferred browser following output appears.

Summary

shape Points

  • The HTML5 canvas elements have different types of attributes.
  • The scripting languages are mandatory in order to design graphics.
  • The attributes height and width are mandatory to adjust the size.