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">
<head>
<!-- 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;
	};
</style>

<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	*/
		myCanvasApp();	
	}
	
	function myCanvasApp() {
		if (!isCanvasSupported()) {
			return;
		}
		
		// Test to see if canvas works
		// document.write("Canvas is Working");
		
		var myCanvasNum1 = document.getElementById('canvasNum1');
		myCanvasNum1.style.background = "black";
		myCanvasNum1.style.height = "600px";
		myCanvasNum1.style.width = "600px";
		
		// Get access to the canvas 2d methods and properties
		var canvasDraw1 = myCanvasNum1.getContext("2d");
		if (canvasDraw1 == null) {
			return;
		}
		
		/* 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
		canvasDraw1.strokeRect(10,10,200,200);
		// Clear rectangle that lies with in the defined area
		canvasDraw1.clearRect(10,10,100,100);
		canvasDraw1.clearRect(0,0,600,600);
		
		// 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;
		canvasDraw1.fillRect(10,10,200,200);
		
		// 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)
		canvasDraw1.beginPath();
		canvasDraw1.arc(100,100,70,0,Math.PI*2);
		canvasDraw1.closePath();
		canvasDraw1.fill();
		
	}
	
	// Uses Modernizer to check if canvas is supported with the current browser
	function isCanvasSupported() {
		return Modernizr.canvas;
	}
</script>

<title>Messing with HTML 5</title>
</head>

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

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

Leave a Reply

Your email address will not be published.

Google+