HTML 5 Help
I’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