HTML5 Explaination

1. nisa1207@gmail.com

2. 
HTML5
◦
◦
◦
◦
<canvas> Element
Examples
Assignment
Practical Tasks
Wednesday, January
15, 2014
2

3. 

The <canvas> element is used to draw
graphics, on the fly, on a web page.
The example shows a red rectangle, a
gradient rectangle, a multicolor
rectangle, and some multicolor text that is
drawn onto the canvas.
Wednesday, January
15, 2014
3

4. 


The HTML5 <canvas> element is used to
draw graphics, on the fly, via scripting
(usually JavaScript).
The <canvas> element is only a container for
graphics. You must use a script to actually
draw the graphics.
Canvas has several methods for drawing
paths, boxes, circles, text, and adding
images.
Wednesday, January 15,
2014
4

5. 
A canvas is a rectangular area on an HTML page,
and it is specified with the <canvas> element.
The markup looks like this:
 <canvas id="myCanvas" width="200"
height="100"></canvas>



Note: By default, the <canvas> element has no border and no content.
Always specify an id attribute (to be referred to in a script), and a
width and height attribute to define the size of the canvas.
Tip: You can have multiple <canvas> elements on one HTML page.
Wednesday, January
15, 2014
5

6. To add a border, use the style attribute:
<canvas id="myCanvas" width="200“ height="100“
style="border:1px solid #000000;">
</canvas>
Draw Onto The Canvas With JavaScript
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Wednesday, January
15, 2014
6

7. First, find the <canvas> element:
 var c=document.getElementById("myCanvas");
Then, call its getContext() method (you must pass the
string "2d" to the getContext() method):
 var ctx=c.getContext("2d");
The getContext("2d") object is a built-in HTML5
object, with many properties and methods for drawing
paths, boxes, circles, text, images, and more.
The next two lines draw a red rectangle:
 ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

Wednesday, January 15,
2014
7

8. 

The fillStyle property can be a CSS color, a
gradient, or a pattern. The default fillStyle is
#000000 (black).
The fillRect(x,y,width,height) method draws a
rectangle filled with the current fill style
Wednesday, January
15, 2014
8

9. <canvas id="myCanvas" width="200“
height="100“
style="border:1px solid #000000;">
</canvas>
Draw Onto The Canvas With JavaScript
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx. strokeStyle="#FF0000";
ctx. strokeRect(20,20,150,100);
</script>
Wednesday, January
15, 2014
9

10. 



The canvas is a two-dimensional grid.
The upper-left corner of the canvas has
coordinate (0,0)
So, the fillRect() method above had the
parameters (0,0,150,75).
This means: Start at the upper-left corner
(0,0) and draw a 150x75 pixels rectangle.
Wednesday, January 15,
2014
10

11. To draw straight lines on a canvas, we will use
the following two methods:
1. moveTo(x,y) defines the starting point of
the line
2. lineTo(x,y) defines the ending point of the
line
To actually draw the line, we must use one of
the "ink" methods, like stroke().
Wednesday, January
15, 2014
11

12. 

Define a starting point in position (0,0), and
an ending point in position (200,100). Then
use the stroke() method to actually draw the
line:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
Wednesday, January
15, 2014
12

13. 

To draw a circle on a canvas, we will use the
following method:
arc(x,y,r,start,stop)
To actually draw the circle, we must use one
of the "ink" methods, like stroke() or fill().
Wednesday, January 15,
2014
13

14. 
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
Wednesday, January
15, 2014
14

15. <script>
var
c=document.getElementById("my
Canvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.strokeStyle="#FF0000";
ctx.stroke();
</script>
Stroke
<script>
var
c=document.getElementById("m
yCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.fillStyle="#FF0000";
ctx.fill();
</script>
Fill
Wednesday, January
15, 2014
15

16. Wednesday, January 15,
2014
16

17. 



To draw text on a canvas, the most important
property and methods are:
font - defines the font properties for text
fillText(text,x,y) - Draws "filled" text on the
canvas (x,y Shows the position where to
display text)
strokeText(text,x,y) - Draws text on the
canvas (no fill)
Wednesday, January 15,
2014
17

18. Write a 30px high filled text on the canvas,
using the font "Arial":
 var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
Wednesday, January 15,
2014
18

19. Write a 30px high text (no fill) on the
canvas, using the font "Arial":
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
Wednesday, January 15,
2014
19

20. Gradients can be used to fill
rectangles, circles, lines, text, etc. Shapes on the
canvas are not limited to solid colors.
There are two different types of gradients:
1.createLinearGradient(x,y,x1,y1) –
Creates a linear gradient
2.createRadialGradient(x,y,r,x1,y1,r1) –
Creates a radial/circular gradient
Once we have a gradient object, we must add two or
more color stops.
Wednesday, January 15,
2014
20

21. 

The addColorStop() method specifies the color
stops, and its position along the gradient.
Gradient positions can be anywhere between 0
to 1.
To use the gradient, set the fillStyle or
strokeStyle property to the gradient, and then
draw the shape, like a rectangle, text, or a line.
Wednesday, January 15,
2014
21

22. 
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);
Wednesday, January 15,
2014
22

23. 
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,0,200);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
Wednesday, January 15,
2014
23

24. 
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,200);
grd.addColorStop(0,"red");
grd.addColorStop(1,“black");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
Wednesday, January 15,
2014
24

25. 

Create a radial/circular gradient. Fill rectangle with
the gradient:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
Wednesday, January 15,
2014
25

26. <script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);
</script>
Wednesday, January 15,
2014
26

27. <script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.strokeStyle=gradient;
ctx.strokeText("QUEST Nawabshah !",5,80);
</script>
Wednesday, January 15,
2014
27

28. <script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.fillStyle=gradient;
ctx.fillText("QUEST Nawabshah !",5,80);
</script>
Wednesday, January 15,
2014
28

29. 

What is Canvas? What is purpose of canvas?
What are advantages and disadvantages of
Canvas?
Wednesday, January 15,
2014
29

30. Draw a Rectangle with following effect
1. stroke
2. Fill
Draw a Rectangle with following effect
1. Stroke Gradient
2. Stroke Fill Gradient
Wednesday, January 15,
2014
30

31. Draw a Circle with following effect
1. Stroke
2. Fill
Write AnyText with following effect
1. Stroke Gradient
2. Stroke Fill Gradient
3. Stroke
4. Fill
Wednesday, January 15,
2014
31

32. Draw a Rectangle with Fill and stroke having
following effects
1. Linear Gradient
1. Horizontal, vertical and Diagonal Effect
2.
Radial Gradient
Wednesday, January 15,
2014
32

33. Wednesday, January
15, 2014
33

34. Wednesday, January
15, 2014
34

35. The shadowColor property sets or returns the
color to use for shadows.
Note: Use the shadowColor property together
with the shadowBlur property to create a shadow.
Tip: Adjust the shadow by using the
 shadowOffsetX and shadowOffsetY properties.

Wednesday, January
15, 2014
35

36. <script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=20;
ctx.shadowColor="black";
ctx.fillStyle="red";
ctx.fillRect(20,20,100,80);
</script>
Wednesday, January 15,
2014
36

37. <script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=35;
ctx.shadowColor="black";
ctx.fillStyle="white";
ctx.fillRect(20,20,100,80);
</script>
Wednesday, January 15,
2014
37

38. <script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=20;
ctx.fillStyle="red";
ctx.shadowColor="black";
ctx.fillRect(20,20,100,80);
ctx.shadowColor="blue";
ctx.fillRect(140,20,100,80);
</script>
Wednesday, January 15,
2014
38

39. 



The shadowOffsetX property sets or returns
the horizontal distance of the shadow from
the shape.
shadowOffsetX=0 indicates that the shadow
is right behind the shape.
shadowOffsetX=20 indicates that the shadow
starts 20 pixels to the right (from the shape's
left position).
shadowOffsetX=-20 indicates that the
shadow starts 20 pixels to the left (from the
shape's left position).
Wednesday, January 15,
2014
39

40. <script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=10;
ctx.shadowOffsetX=10;
ctx.shadowColor="black";
ctx.fillStyle="red";
ctx.fillRect(20,20,100,80);
</script>
Wednesday, January 15,
2014
40

41. ctx.shadowOffsetX=0;
ctx.shadowOffsetX=-10;
ctx.shadowOffsetX=10;
ctx.shadowOffsetX=50;
Wednesday, January
15, 2014
41

42. 



The shadowOffsetY property sets or returns
the vertical distance of the shadow from the
shape.
shadowOffsety=0 indicates that the shadow
is right behind the shape.
shadowOffsetY=20 indicates that the shadow
starts 20 pixels below the shape's top
position.
shadowOffsetY=-20 indicates that the
shadow starts 20 pixels above the shape's
top position.
Wednesday, January 15,
2014
42

43. <script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=10;
ctx.shadowOffsetY=20;
ctx.shadowColor="black";
ctx.fillStyle="red";
ctx.fillRect(20,20,100,80);
</script>
Wednesday, January
15, 2014
43

44. ctx.shadowOffsetY=0;
ctx.shadowOffsetY=-10;
ctx.shadowOffsetY=10;
ctx.shadowOffsetY=50;
Wednesday, January
15, 2014
44

45. 
Apply Horizontal and Vertical shadow
properties on the shapes which are given in
practical task of <canvas>
Wednesday, January 15,
2014
45

46. 

http://www.w3schools.com/tags/ref_canvas.
asp
http://www.w3schools.com/html/default.asp
Wednesday, January
15, 2014
46