Back to Main Page
HTML5 Tags - Canvas, Audio, and Video
Canvas Tag
Canvas tags can be used to draw graphics on a webpage with code (usually JavaScript). The element is a container for graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding images. It can be animated, interactive, or used in website games.
The JavaScript
function draw(x, y) {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var ntd = canvas.getContext('2d');
var btw = canvas.getContext('2d');
var mtx = canvas.getContext('2d');
ctx.save();
ctx.clearRect(0, 0, 600, 200);
ctx.fillStyle = "rgba(255,0,0,1)";
ctx.fillRect(10, x, 80, 100);
ctx.restore();
ntd.fillStyle = "rgba(0,0,225,1)";
ntd.fillRect(200, 50, 100, x);
ntd.restore();
btw.save();
btw.fillStyle = "rgba(0,255,0,1)";
btw.fillRect(275, 20, x, 75);
btw.restore();
mtx.beginPath();
mtx.arc(500, 145, 40, 0, 2 * Math.PI);
mtx.stroke();
x += 2;
var loopTimer = setTimeout('draw(' + x + ',' + y + ')', 30);
}
A charming cat video
The Video HTML tag code:
The <Video> tag
<video src="images/cat.mpr" width="600" controls autoplay loop muted></video>
Default settings for videos when browser doesn't support video format or HTML 5.
<video controls>
<source src="images/cat.mp4" type="video/mp4; codecs='avc1, mp4a'">
<source src="images/cat.webm" type="video/webm; codecs='vp8.0, vorbis'">
<p>Browser does not support the video tag.</p>
</video>
The Audio Tag: <Audio>
HTML5 can embed audio files using src, controls, autoplay and loop attributes. This provides user options how to control audio files.
The code Sample HTML5 audio tag:
<audio controls>
<source> src="moonlight-sonata.m4a">
Your browser does not support the audio element.
</audio>
Ludwig van Beethoven - Moonlight Sonata
Moonlight Sonata
Back to Main Page