6. HTML5 New Elements
TAG Description
Canvas
Example
<canvas id="myCanvas" width="200"
height="100" style="border:1px solid
#000000;">
Your browser does not support the HTML5
canvas tag.
</canvas>
7. New media element
Tag Description
<audio>
<video>
<source>
<embed>
<track>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4”>
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
8. New Form Element
Tag Description
<datalist> Specifies a list of pre-
defined options for input
controls
<keygen> Defines a key-pair
generator field (for forms)
< output> Defines the result of a
calculation
9. Canvas
Draw Onto The Canvas With JavaScript
Example
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
First, find the <canvas> element:
The fillRect(x,y,width,height)
X
Y
10. Example Canvas
//Circle
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
//Text
var c1=document.getElementById("myCanvas1");
var ctx1=c1.getContext("2d");
ctx1.font="30px Arial";
ctx1.fillText("Hello World",10,50);
11. Canvas – Gradients
Example
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
12. Canvas - Images
Example
<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream"
width="220" height="277"><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
13. LAB#4 New Element HTML5
HTML5 Canvas
HTML5
10
========= ========================