HTML 5 Help

HTML 5 HelpI’ve received numerous requests for some HTML 5 Help. So, in this tutorial I’ll cover one of the most exciting new features being the HTML 5 Canvas tag.

This will be a long tutorial that you’ll be able to use as a HTML 5 guide.

While HTML 5 is nor supported by Internet Explorer versions prior to the newest version 9, I felt I had waited long enough to cover this topic.

All of the code follows the video. Feel free to use it in anyway that you’d like.

HTML 5 Help Topics

In this tutorial I’ll cover the following in regards to HTML 5:

  • HTML 5 Standard Web Page Tags
  • Using Modernizr to test browser compatibility with HTML 5
  • The HTML 5 canvas tag
  • Styling canvas with css
  • Using fillStyle, lineWidth, strokeStyle, addColorStop
  • Drawing with fillRect, clearRect, fill and arc
  • HTML 5 Canvas Gradients

<!doctype html>
<!-- HTML 5 Standard Web Page Tags -->
<!-- The first line tells the browser to render the page in standards mode -->
<!-- Next line of code tells the browser what language is used -->
<html lang="en">
<!-- Tell the browser what character encoding method is being used -->
<meta charset="UTF-8">
<!-- modernizr is a JavaScript library that allows you to use HTML 5 on all browsers. I'm using it here to test if canvas is installed -->
<script src="modernizr.custom.64953.js"></script>

<style type="text/css">
	#canvasNum1 {
		background-color: green;

<script type="text/javascript">
	// When the web page is loaded this code will execute
	window.onload = function() {
		/* Call this function to execute all the code and check if canvas is supported	*/
	function myCanvasApp() {
		if (!isCanvasSupported()) {
		// Test to see if canvas works
		// document.write("Canvas is Working");
		var myCanvasNum1 = document.getElementById('canvasNum1'); = "black"; = "600px"; = "600px";
		// Get access to the canvas 2d methods and properties
		var canvasDraw1 = myCanvasNum1.getContext("2d");
		if (canvasDraw1 == null) {
		/* There are 3 stroke and fill styles: fillStyle, strokeStyle and lineWidth. They all default to black */
		// Define the fill style
		canvasDraw1.fillStyle = "green";
		// Draw a rectangle with the current fill
		canvasDraw1.fillRect(10,10,200,200); // fillRect(x, y, width, height)
		// Define the line width
		canvasDraw1.lineWidth = 5;
		// Define the stroke color
		canvasDraw1.strokeStyle = '#ccc';
		// Draw a rectangle using the current stroke
		// Clear rectangle that lies with in the defined area
		// Create a gradient by first defining starting x1, y1 and ending x2, y2
		var gradientSamp = canvasDraw1.createLinearGradient(10,10,200,200);
		// Define the colors that go into the gradient
		// Define how much of the space the gradient takes up using fractions
		gradientSamp.addColorStop(0, 'blue');
		gradientSamp.addColorStop(1 / 3, 'purple');
		gradientSamp.addColorStop(2 / 3, 'white');
		canvasDraw1.fillStyle = gradientSamp;
		// You create a radial gradient by defining two ellipses
		/* x center for first ellipse, y for first ellipse, radius for first ellipse and then the same for the second ellipse */
		var gradientRadial = canvasDraw1.createRadialGradient(100,100,5, 100,100,100);
		// Define colors to be used by both gradients
		gradientRadial.addColorStop(0, 'white');
		gradientRadial.addColorStop(1, 'blue');
		canvasDraw1.fillStyle = gradientRadial;
		// arc(x, y, radius, starting angle, ending angle)
	// Uses Modernizer to check if canvas is supported with the current browser
	function isCanvasSupported() {
		return Modernizr.canvas;

<title>Messing with HTML 5</title>

	<canvas id="canvasNum1" width="500" height="400">Your browser doesn't support HTML 5 Canvas</canvas>

If you liked this video, feel free to tell your friend
Till Next Time

Leave a Reply

Your email address will not be published.