Download - Part 2 - HTML Canvas Tag in depth
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
7/27/2019 Part 2 - HTML Canvas Tag in depth
http://slidepdf.com/reader/full/part-2-html-canvas-tag-in-depth 2/25
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
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:
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:
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
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.
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().
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
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.
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)
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 :
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
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 :
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
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
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.
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 :
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
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 :
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
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 )
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
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 :
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…