nisa1207@gmail.com


HTML5
◦
◦
◦
◦

<canvas> Element
Examples
Assignment
Practical Tasks

Wednesday, January
15, 2014

2




The <canvas> element is used to draw
graphics, on the fly, on a web page.
The example shows a red rectangle, a
gradi...






The HTML5 <canvas> element is used to
draw graphics, on the fly, via scripting
(usually JavaScript).
The <canvas>...


A canvas is a rectangular area on an HTML page,
and it is specified with the <canvas> element.

The markup looks like t...
To add a border, use the style attribute:

<canvas id="myCanvas" width="200“ height="100“
style="border:1px solid #000000;...
First, find the <canvas> element:
 var c=document.getElementById("myCanvas");
Then, call its getContext() method (you mus...




The fillStyle property can be a CSS color, a
gradient, or a pattern. The default fillStyle is
#000000 (black).
The f...
<canvas id="myCanvas" width="200“
height="100“
style="border:1px solid #000000;">
</canvas>
Draw Onto The Canvas With Java...







The canvas is a two-dimensional grid.
The upper-left corner of the canvas has
coordinate (0,0)
So, the fillRect...
To draw straight lines on a canvas, we will use
the following two methods:
1. moveTo(x,y) defines the starting point of
th...




Define a starting point in position (0,0), and
an ending point in position (200,100). Then
use the stroke() method t...




To draw a circle on a canvas, we will use the
following method:
arc(x,y,r,start,stop)
To actually draw the circle, w...


var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
...
<script>
var
c=document.getElementById("my
Canvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Mat...
Wednesday, January 15,
2014

16







To draw text on a canvas, the most important
property and methods are:
font - defines the font properties for t...
Write a 30px high filled text on the canvas,
using the font "Arial":
 var c=document.getElementById("myCanvas");
var ctx=...
Write a 30px high text (no fill) on the
canvas, using the font "Arial":
var c=document.getElementById("myCanvas");
var ctx...
Gradients can be used to fill
rectangles, circles, lines, text, etc. Shapes on the
canvas are not limited to solid colors....




The addColorStop() method specifies the color
stops, and its position along the gradient.
Gradient positions can be ...


var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradi...


var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradi...


var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradi...




Create a radial/circular gradient. Fill rectangle with
the gradient:
var c=document.getElementById("myCanvas");
var ...
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,...
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
// Create gradien...
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
// Create gradien...



What is Canvas? What is purpose of canvas?
What are advantages and disadvantages of
Canvas?

Wednesday, January 15,
2...
Draw a Rectangle with following effect
1. stroke
2. Fill
Draw a Rectangle with following effect
1. Stroke Gradient
2. Stro...
Draw a Circle with following effect
1. Stroke
2. Fill
Write AnyText with following effect
1. Stroke Gradient
2. Stroke Fil...
Draw a Rectangle with Fill and stroke having
following effects
1. Linear Gradient
1. Horizontal, vertical and Diagonal Eff...
Wednesday, January
15, 2014

33
Wednesday, January
15, 2014

34
The shadowColor property sets or returns the
color to use for shadows.
Note: Use the shadowColor property together
with th...
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=20;
ctx.shadowColor="black"...
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=35;
ctx.shadowColor="black"...
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=20;
ctx.fillStyle="red";
ct...







The shadowOffsetX property sets or returns
the horizontal distance of the shadow from
the shape.
shadowOffsetX=...
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=10;
ctx.shadowOffsetX=10;
c...
ctx.shadowOffsetX=0;
ctx.shadowOffsetX=-10;
ctx.shadowOffsetX=10;

ctx.shadowOffsetX=50;
Wednesday, January
15, 2014

41







The shadowOffsetY property sets or returns
the vertical distance of the shadow from the
shape.
shadowOffsety=0 ...
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=10;
ctx.shadowOffsetY=20;
c...
ctx.shadowOffsetY=0;
ctx.shadowOffsetY=-10;
ctx.shadowOffsetY=10;

ctx.shadowOffsetY=50;
Wednesday, January
15, 2014

44


Apply Horizontal and Vertical shadow
properties on the shapes which are given in
practical task of <canvas>

Wednesday,...




http://www.w3schools.com/tags/ref_canvas.
asp
http://www.w3schools.com/html/default.asp

Wednesday, January
15, 2014...
Upcoming SlideShare
Loading in …5
×

Html5 canvas

424 views
309 views

Published on

HTML5 Explaination

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
424
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 canvas

  1. 1. nisa1207@gmail.com
  2. 2.  HTML5 ◦ ◦ ◦ ◦ <canvas> Element Examples Assignment Practical Tasks Wednesday, January 15, 2014 2
  3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 16. Wednesday, January 15, 2014 16
  17. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 29.   What is Canvas? What is purpose of canvas? What are advantages and disadvantages of Canvas? Wednesday, January 15, 2014 29
  30. 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. 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. 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. 33. Wednesday, January 15, 2014 33
  34. 34. Wednesday, January 15, 2014 34
  35. 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. 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. 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. 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. 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. 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. 41. ctx.shadowOffsetX=0; ctx.shadowOffsetX=-10; ctx.shadowOffsetX=10; ctx.shadowOffsetX=50; Wednesday, January 15, 2014 41
  42. 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. 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. 44. ctx.shadowOffsetY=0; ctx.shadowOffsetY=-10; ctx.shadowOffsetY=10; ctx.shadowOffsetY=50; Wednesday, January 15, 2014 44
  45. 45.  Apply Horizontal and Vertical shadow properties on the shapes which are given in practical task of <canvas> Wednesday, January 15, 2014 45
  46. 46.   http://www.w3schools.com/tags/ref_canvas. asp http://www.w3schools.com/html/default.asp Wednesday, January 15, 2014 46

×