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

http://www.infobizzs.com/







† 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

http://www.infobizzs.com/services.php



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:




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:




Canvas PATH Example




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.




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().




CANVAS Circle Example




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.




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)




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 :




Text element example





†Using strokeText():

† Example :

† Write a 26px high text (no fill) on the canvas, using the font

“Calibri":









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




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.




CANVAS Gradients Example 1

†Using createLinearGradient():

† Example :

† Create a linear gradient. Fill rectangle with the gradient:










†Using createRadialGradient():

† Example :

† Create a radial/circular gradient. Fill rectangle with the gradient:









CANVAS Images

†To draw an image on a canvas, we will use the followingmethod:

• drawImage(image,x,y )




CANVAS Images




CANVAS Images

†

Output will be as follows :




End of CANVAS Tag

†

Here we finish the CANVAS tag.

† In the next section, we will discuss on “SVG”.

† To be continue…


Documents

Part 2 - HTML Canvas Tag in depth