part 2 - html canvas tag in depth
TRANSCRIPT
![Page 1: Part 2 - HTML Canvas Tag in depth](https://reader031.vdocuments.site/reader031/viewer/2022020806/577cd71d1a28ab9e789e18f8/html5/thumbnails/1.jpg)
7/27/2019 Part 2 - HTML Canvas Tag in depth
http://slidepdf.com/reader/full/part-2-html-canvas-tag-in-depth 1/25
HTML 5, Canvas Tag in depth -Part 2
![Page 2: Part 2 - HTML Canvas Tag in depth](https://reader031.vdocuments.site/reader031/viewer/2022020806/577cd71d1a28ab9e789e18f8/html5/thumbnails/2.jpg)
7/27/2019 Part 2 - HTML Canvas Tag in depth
http://slidepdf.com/reader/full/part-2-html-canvas-tag-in-depth 2/25
![Page 3: Part 2 - HTML Canvas Tag in depth](https://reader031.vdocuments.site/reader031/viewer/2022020806/577cd71d1a28ab9e789e18f8/html5/thumbnails/3.jpg)
7/27/2019 Part 2 - HTML Canvas Tag in depth
http://slidepdf.com/reader/full/part-2-html-canvas-tag-in-depth 3/25
† In the previous part 1, I saw you the basic of HTML 5 and
basic introduction on CANVAS tag with example.
† Today, let us move ahead to see the detail of CANVAS tag.
† In the last of Part 1, we saw how to draw co-ordinates. Let
me show you that again to refresh last session.
HTML 5 – CANVAS Tag
![Page 4: Part 2 - HTML Canvas Tag in depth](https://reader031.vdocuments.site/reader031/viewer/2022020806/577cd71d1a28ab9e789e18f8/html5/thumbnails/4.jpg)
7/27/2019 Part 2 - HTML Canvas Tag in depth
http://slidepdf.com/reader/full/part-2-html-canvas-tag-in-depth 4/25
Coordinates of <canvas> element
†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,100,150).
† This means : Start at the upper-left corner (0,0) and draw a
100x150 pixels rectangle.
† Mouse over the rectangle below to see its x and y coordinates:
![Page 5: Part 2 - HTML Canvas Tag in depth](https://reader031.vdocuments.site/reader031/viewer/2022020806/577cd71d1a28ab9e789e18f8/html5/thumbnails/5.jpg)
7/27/2019 Part 2 - HTML Canvas Tag in depth
http://slidepdf.com/reader/full/part-2-html-canvas-tag-in-depth 5/25
Canvas PATH
† To draw straight lines on a canvas, we will use thefollowing 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().
† For example : Define a starting point in position (0,0), and
an ending point in position (200,100). Then use thestroke() method to actually draw the line:
![Page 6: Part 2 - HTML Canvas Tag in depth](https://reader031.vdocuments.site/reader031/viewer/2022020806/577cd71d1a28ab9e789e18f8/html5/thumbnails/6.jpg)
7/27/2019 Part 2 - HTML Canvas Tag in depth
http://slidepdf.com/reader/full/part-2-html-canvas-tag-in-depth 6/25
Canvas PATH Example
![Page 7: Part 2 - HTML Canvas Tag in depth](https://reader031.vdocuments.site/reader031/viewer/2022020806/577cd71d1a28ab9e789e18f8/html5/thumbnails/7.jpg)
7/27/2019 Part 2 - HTML Canvas Tag in depth
http://slidepdf.com/reader/full/part-2-html-canvas-tag-in-depth 7/25
Canvas PATH Output
† In example, we gave canvas border : 2px and color is“#ddabcd”.
† You can change the c.lineTo (200,100) parameter
according to your requirement.
![Page 8: Part 2 - HTML Canvas Tag in depth](https://reader031.vdocuments.site/reader031/viewer/2022020806/577cd71d1a28ab9e789e18f8/html5/thumbnails/8.jpg)
7/27/2019 Part 2 - HTML Canvas Tag in depth
http://slidepdf.com/reader/full/part-2-html-canvas-tag-in-depth 8/25
CANVAS Circle element
† To draw a circle on a canvas, we will use the followingmethod:
• arc(x,y,r,start,stop)
† To actually draw the circle, we must use one of the "ink"
methods, like stroke() or fill().
![Page 9: Part 2 - HTML Canvas Tag in depth](https://reader031.vdocuments.site/reader031/viewer/2022020806/577cd71d1a28ab9e789e18f8/html5/thumbnails/9.jpg)
7/27/2019 Part 2 - HTML Canvas Tag in depth
http://slidepdf.com/reader/full/part-2-html-canvas-tag-in-depth 9/25
CANVAS Circle Example
![Page 10: Part 2 - HTML Canvas Tag in depth](https://reader031.vdocuments.site/reader031/viewer/2022020806/577cd71d1a28ab9e789e18f8/html5/thumbnails/10.jpg)
7/27/2019 Part 2 - HTML Canvas Tag in depth
http://slidepdf.com/reader/full/part-2-html-canvas-tag-in-depth 10/25
CANVAS Circle Example
† Here we take ctx.arc(95,50,40,0,2*Math.PI);
† It draws circle according to this function.
†You can change the values also.
![Page 11: Part 2 - HTML Canvas Tag in depth](https://reader031.vdocuments.site/reader031/viewer/2022020806/577cd71d1a28ab9e789e18f8/html5/thumbnails/11.jpg)
7/27/2019 Part 2 - HTML Canvas Tag in depth
http://slidepdf.com/reader/full/part-2-html-canvas-tag-in-depth 11/25
CANVAS Text element
†To draw text on a canvas, the most important property andmethods are:
• font - defines the font properties for text
• fillText(text,x,y ) - Draws "filled" text on the canvas
•strokeText(text,x,y ) - Draws text on the canvas (no fill)
![Page 12: Part 2 - HTML Canvas Tag in depth](https://reader031.vdocuments.site/reader031/viewer/2022020806/577cd71d1a28ab9e789e18f8/html5/thumbnails/12.jpg)
7/27/2019 Part 2 - HTML Canvas Tag in depth
http://slidepdf.com/reader/full/part-2-html-canvas-tag-in-depth 12/25
Text element Example 1
†Using fillText():
† Example :
† Write a 26px high filled text on the canvas, using the font
“Calibri“ :
† The output will be as follows :
![Page 13: Part 2 - HTML Canvas Tag in depth](https://reader031.vdocuments.site/reader031/viewer/2022020806/577cd71d1a28ab9e789e18f8/html5/thumbnails/13.jpg)
7/27/2019 Part 2 - HTML Canvas Tag in depth
http://slidepdf.com/reader/full/part-2-html-canvas-tag-in-depth 13/25
Text element example
![Page 14: Part 2 - HTML Canvas Tag in depth](https://reader031.vdocuments.site/reader031/viewer/2022020806/577cd71d1a28ab9e789e18f8/html5/thumbnails/14.jpg)
7/27/2019 Part 2 - HTML Canvas Tag in depth
http://slidepdf.com/reader/full/part-2-html-canvas-tag-in-depth 14/25
Text element Example 2
†Using strokeText():
† Example :
† Write a 26px high text (no fill) on the canvas, using the font
“Calibri":
† The output will be as follows :
![Page 15: Part 2 - HTML Canvas Tag in depth](https://reader031.vdocuments.site/reader031/viewer/2022020806/577cd71d1a28ab9e789e18f8/html5/thumbnails/15.jpg)
7/27/2019 Part 2 - HTML Canvas Tag in depth
http://slidepdf.com/reader/full/part-2-html-canvas-tag-in-depth 15/25
Text element Example 2
![Page 16: Part 2 - HTML Canvas Tag in depth](https://reader031.vdocuments.site/reader031/viewer/2022020806/577cd71d1a28ab9e789e18f8/html5/thumbnails/16.jpg)
7/27/2019 Part 2 - HTML Canvas Tag in depth
http://slidepdf.com/reader/full/part-2-html-canvas-tag-in-depth 16/25
CANVAS Gradients
†The text part is over. Let us know about how to fill more color ormake gradient colors.
† 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:
• createLinearGradient( x,y,x1,y1) - Creates a linear gradient
• createRadialGradient( x,y,r,x1,y1,r1) - Creates a
radial/circular gradient
![Page 17: Part 2 - HTML Canvas Tag in depth](https://reader031.vdocuments.site/reader031/viewer/2022020806/577cd71d1a28ab9e789e18f8/html5/thumbnails/17.jpg)
7/27/2019 Part 2 - HTML Canvas Tag in depth
http://slidepdf.com/reader/full/part-2-html-canvas-tag-in-depth 17/25
CANVAS Gradients
†Once we have a gradient object, we must add two or more colorstops.
† 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.
![Page 18: Part 2 - HTML Canvas Tag in depth](https://reader031.vdocuments.site/reader031/viewer/2022020806/577cd71d1a28ab9e789e18f8/html5/thumbnails/18.jpg)
7/27/2019 Part 2 - HTML Canvas Tag in depth
http://slidepdf.com/reader/full/part-2-html-canvas-tag-in-depth 18/25
CANVAS Gradients Example 1
†Using createLinearGradient():
† Example :
† Create a linear gradient. Fill rectangle with the gradient:
† The output will be as follows :
![Page 19: Part 2 - HTML Canvas Tag in depth](https://reader031.vdocuments.site/reader031/viewer/2022020806/577cd71d1a28ab9e789e18f8/html5/thumbnails/19.jpg)
7/27/2019 Part 2 - HTML Canvas Tag in depth
http://slidepdf.com/reader/full/part-2-html-canvas-tag-in-depth 19/25
CANVAS Gradients Example 1
![Page 20: Part 2 - HTML Canvas Tag in depth](https://reader031.vdocuments.site/reader031/viewer/2022020806/577cd71d1a28ab9e789e18f8/html5/thumbnails/20.jpg)
7/27/2019 Part 2 - HTML Canvas Tag in depth
http://slidepdf.com/reader/full/part-2-html-canvas-tag-in-depth 20/25
CANVAS Gradients Example 2
†Using createRadialGradient():
† Example :
† Create a radial/circular gradient. Fill rectangle with the gradient:
† The output will be as follows :
![Page 21: Part 2 - HTML Canvas Tag in depth](https://reader031.vdocuments.site/reader031/viewer/2022020806/577cd71d1a28ab9e789e18f8/html5/thumbnails/21.jpg)
7/27/2019 Part 2 - HTML Canvas Tag in depth
http://slidepdf.com/reader/full/part-2-html-canvas-tag-in-depth 21/25
CANVAS Gradients Example 2
![Page 22: Part 2 - HTML Canvas Tag in depth](https://reader031.vdocuments.site/reader031/viewer/2022020806/577cd71d1a28ab9e789e18f8/html5/thumbnails/22.jpg)
7/27/2019 Part 2 - HTML Canvas Tag in depth
http://slidepdf.com/reader/full/part-2-html-canvas-tag-in-depth 22/25
CANVAS Images
†To draw an image on a canvas, we will use the followingmethod:
• drawImage(image,x,y )
![Page 23: Part 2 - HTML Canvas Tag in depth](https://reader031.vdocuments.site/reader031/viewer/2022020806/577cd71d1a28ab9e789e18f8/html5/thumbnails/23.jpg)
7/27/2019 Part 2 - HTML Canvas Tag in depth
http://slidepdf.com/reader/full/part-2-html-canvas-tag-in-depth 23/25
CANVAS Images
![Page 24: Part 2 - HTML Canvas Tag in depth](https://reader031.vdocuments.site/reader031/viewer/2022020806/577cd71d1a28ab9e789e18f8/html5/thumbnails/24.jpg)
7/27/2019 Part 2 - HTML Canvas Tag in depth
http://slidepdf.com/reader/full/part-2-html-canvas-tag-in-depth 24/25
CANVAS Images
†
Output will be as follows :
![Page 25: Part 2 - HTML Canvas Tag in depth](https://reader031.vdocuments.site/reader031/viewer/2022020806/577cd71d1a28ab9e789e18f8/html5/thumbnails/25.jpg)
7/27/2019 Part 2 - HTML Canvas Tag in depth
http://slidepdf.com/reader/full/part-2-html-canvas-tag-in-depth 25/25
End of CANVAS Tag
†
Here we finish the CANVAS tag.
† In the next section, we will discuss on “SVG”.
† To be continue…