HTML 5 Help 2

HTML 5 Help 2In HTML 5 Help Part 1, I introduced the HTML 5 standard tags and then went on to introduce the HTML 5 Canvas Tag.

In this tutorial, I will continue covering Canvas. I answer many questions that have been emailed to me and I focus on all you can do with lines, paths, arcs and text with HTML 5 Canvas.

All of the code used follows the video of course.

Code From the Video

<!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 = "white";
		
		// This actually stretches the canvas based off of the dimensions 
		// defined by the canvas tag
		myCanvasNum1.style.height = "600px";
		myCanvasNum1.style.width = "600px";
		
		// This resizes the canvas without stretching or distorting it
		myCanvasNum1.height = "600";
		myCanvasNum1.width = "600";
		
		// You can define the border style with solid, dashed, dotted, double
		// groove, ridge, inset, outset
		myCanvasNum1.style.border = "2px dotted #000"; 
		
		// Get access to the canvas 2d methods and properties
		var canvasDraw1 = myCanvasNum1.getContext("2d");
		if (canvasDraw1 == null) {
			return;
		}
		
		// beginPath starts a new set of drawings
		canvasDraw1.beginPath();
		
		// lineWidth defines the width of the line in pixels
		canvasDraw1.lineWidth = 10;
		
		// strokeStyle defines the color of the stroke
		canvasDraw1.strokeStyle = "purple";
		
		// moveTo moves the drawing tool to a point
		canvasDraw1.moveTo(25, 25);
		
		// lineTo draws from the point defined by moveTo to a new point
		canvasDraw1.lineTo(300,300);
		canvasDraw1.lineTo(300,25);
		
		// lineJoin defines how lines join (miter, round, bevel)
		canvasDraw1.lineJoin= 'bevel';
		
		// lineCap defines how a line ends (butt, square, round)
		canvasDraw1.lineCap= 'round';
		
		// stroke draws all of the path commands to the screen
		canvasDraw1.stroke();
		
		canvasDraw1.save(); // Saves all the current settings
		
		// Start new drawing
		
		canvasDraw1.beginPath();
		canvasDraw1.lineWidth = 15;
		canvasDraw1.strokeStyle = "green";
		canvasDraw1.moveTo(100, 25);
		
		canvasDraw1.lineTo(400,350);
		canvasDraw1.lineTo(400,25);
		
		// Resets the lineWidth, strokeStyle to saved settings
		canvasDraw1.restore(); 
		
		canvasDraw1.stroke();
		
		canvasDraw1.clearRect(5, 5, 595, 595); // Clear the canvas
		
		// MORE ABOUT ARCS
		
		// Arc angles are in radians and not degrees
		// arc(x of arc, y of arc, radius, start angle, end angle, counter 
		// clockwise);
		
		
		canvasDraw1.beginPath();
		
		// Draws a circle
		// canvasDraw1.arc(300, 300, 200, 0, 2 * Math.PI, false);
		
		// Draws the bottom of the circle
		// canvasDraw1.arc(300, 300, 200, 0, 1 * Math.PI, false);
		
		// Draws the top of the circle
		// canvasDraw1.arc(300, 300, 200, 0, 1 * Math.PI, true);
		
		// Draws the top quarter of the circle
		// canvasDraw1.arc(300, 300, 200, 0, 1.5 * Math.PI, true);
		
		// Using degrees instead of radians
		// radians = (Math.PI / 180) * degrees
		// degrees = radians * (180 / Math.PI)
		// 360 degrees = (2 * Math.PI) Radians
		var degreeToDraw = 90;
		var radianToDraw = (Math.PI / 180) * degreeToDraw;
		
		canvasDraw1.arc(300, 300, 200, 0, radianToDraw, false);
		
		canvasDraw1.closePath(); // Connects the starting point and end point
		
		canvasDraw1.fillStyle = "red"; // Won't fill the path without fill()
		
		canvasDraw1.fill(); // This applies the fill
		
		canvasDraw1.stroke();
		
		// ALL ABOUT TEXT
		
		var stringToDraw = "Sample String";
		
		// font is used to define typeface, size, weight Default sans-serif/10px
		canvasDraw1.font = "40pt arial";
		canvasDraw1.fillStyle = "red";
		canvasDraw1.strokeStyle = "black";
		
		// Draws the fill part of the text to string
		canvasDraw1.fillText(stringToDraw, 100, 100);
		
		// Defining the width of the stroke
		canvasDraw1.lineWidth = 2;
		// strokeText draws the path that surrounds the text
		canvasDraw1.strokeText(stringToDraw, 100, 100);
		
		// measureText returns an object with a width property in pixels
		var textMeasure = canvasDraw1.measureText(stringToDraw);
		
		var widthOfText = textMeasure.width;
		
		canvasDraw1.fillText(widthOfText, 200, 200);
		
		// textAlign is either start, end, left, center, right
		// textBaseline is either alphabetic, top, middle, bottom
		
		
	}
	
	// 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>

Till Next Time

Think Tank

Leave a Reply

Your email address will not be published.

Google+