Canvas Examples and their Properties
- The <canvas> element is used for creating a canvas
- A canvas element has various methods and properties.
Geometric examples
1. Drawing Rectangles
There are three methods used for drawing rectangles as follows:
a. fillRect(x,y,width,height) : A filled rectangle is drawn by using this method.
b. strokeRect(x,y,width,height) : A rectangular outline is drawn by using this method.
c. clearRect(x,y,width,height) : The specified area is cleared and it makes it transparent by using this method.
Where,
x, y coordinates will specify the position on the canvas of the top-left corner of the rectangle.
width and height will specify the width and the height of the rectangle.
Some properties are common to all the methods. Following is a list of properties common to methods 2 - 6
a) beginPath() : The current path is reset by using this method.
b) moveTo(x,y) : A new subpath is created with the given point by using this method.
c) closePath() : It marks the current subpath as closed, a new subpath is started with a point with a start and end of the newly closed subpath.
d) fill() : The subpaths are filled with the current fill style by using this method.
e) stroke() : The subpaths are stroked with the current style of stroke by using this method.
2. Drawing Paths
In addition to the above mentioned common properties this property has an additional method as follows:
a) arc(x,y, radius, startAngle, endAngle, anticlockwise)
Arc adds points to the subpath in such a manner that it is described by the circumference of a circle. The circle is described by the arguments, starting at the given start angle and ending at the given end angle by going in the given direction and is added to the path connecting to the previous point by a straight line.
3. Drawing Lines
The drawing of lines can be divided into two parts
i) Line methods
ii) Line Properties
i) Line methods
In addition to the above mentioned common properties this property has an additional method given below:
a) lineTo(x,y) : A given point is added to the current subpath by connecting the previous one by a straight line.
ii) Line Properties
a) lineWidth [=value] : It returns the current line width and is set for changing the width of the line.
b) lineCap [=value] : This property sets or returns the style of the end caps for a line. The possible values for this can be butt, round and square.
butt - default value. Adds a flat edge on both sides of the line.
round – Adds a round cap to both the ends of the line.
square – Adds a square cap to both the ends of the line.
c) lineJoin [=value] : It sets or returns the type of corner created when two lines meet. The possible styles are round, bevel and miter.
round – a rounded corner is created.
bevel – a beveled corner is created.
miter – default value. A sharp corner is created.
d) miterLimit [=value] : It sets or returns the maximum miter length. The distance between the inner corner and the outer corner where the two lines meet is known as miter length.
This property will work only if the lineJoin attribute is “miter”.
4. Drawing Bezier Curves
In addition to the above mentioned common properties this property has an additional method as follows:
a) bezierCurveTo(cp1x, cp2x,cp2x,cp2y,x,y)
A given point is added to the current path which is connected to the previous one by a cubic Bezier curve with the given control points.
Where,
x and y parameters are the end point coordinates.
cp1x and cp1y are the first control point coordinates.
cp2x and cp2y are the second control point coordinates.
5. Drawing Quadratic Curve
In addition to the above mentioned common properties this property has an additional method as follows:
a) quadraticCurveTo(cpx,cpy,x,y)
A given point is added to the current path which is connected to the previous one by a cubic Bezier curve with the given control points.
Where,
x and y parameters are the end point coordinates.
cpx and cpy are the control point coordinates.
6. Using images
External images can be imported into a canvas and can be drawn by using the above mentioned common methods. An additional method to do this as follows:
a) drawImage(image,dx,dy)
A given image is drawn on to the canvas by using this metho
Where,
image is the reference to the image or the canvas object.
x and y coordinates will form the target canvas where the image will be placed.
Effects examples
1. Create Gradients
By using the following methods canvas allows to fill and stroke the shapes by using the linear and radial gradients.
a) addColorStop(offset,color)
By using this method we can add a color stop by the given color to the gradient at the given offset.
0.0 is the offset at one end of the gradient and 1.0 is the offset of the other end.
b) createLinearGradient (x0,y0,x1,y1)
This method is used for creating a linear gradient object. They are used for filling rectangle, circle, lines etc.
The four arguments (x1,y1) represent the start point and (x2,y2) represent the end point of the gradient.
c) createRadialGradient (x0,y0,r0,x1,y1,r1)
This method creates a radial/ circular gradient object. They are used for filling rectangles, circles, lines etc.
Where,
x0,y0,r0 are used for defining a circle with coordinates x1,y1 and radius r1.
2. Styles and colors
There are two important properties which are used for applying colors to a shape as follows:
a) fillStyle : It is used for representing the color or style to be used inside the shapes.
b) strokeStyle : It is used for representing the color or style which is used for the lines drawn around the shapes.
3. Text and Fonts
Canvas has the capabilities for creating text by using different font and text properties as follows:
a) font [=value] : The current font settings are returned by this property and it can be set for changing the font.
b) textAlign [=value] : The current text alignment settings are returned by using this property and it can be set for changing the alignment of the text. The values are start, end, left, right and center.
start – default value. It starts the text at the specified position.
end – it ends the text at the specified position.
center – it places the center of the text at the specified position.
left – the text is started at the specified position.
right – it ends the text at the specified position.
c) textBaseline [=value]
The current baseline alignment settings are returned by this property and can be set to change the baseline alignment of the text.
The values for this can be top, hanging, middle, alphabetic, ideographic and bottom.
alphabetic - default value. It has a normal alphabetic baseline.
top – it is the top of the em square.
hanging – it is the hanging baseline.
middle – it is the middle of the em square.
ideographic - it is the ideographic baseline.
bottom – it is the bottom of the bounding box.
d) fillText(text,x,y [maxWidth])
The given text is filled up by this property at the given position which is indicated by the coordinates x and y.
e) strokeText(text,x,y [maxWidth])
With this property, the strokes are given to the text at a given position indicated by x and y coordinates.
4. Pattern and Shadow
The pattern and shadows can be divided into two parts:
i) Create Pattern
ii) Create Shadows
i) Create Pattern
The following method will help you create a pattern on the canvas:
a) createPattern(image, repetition) : image is used for creating a pattern by using this method.
Second argument is a string. It can have the values repeat, repeat-x, repeat-y and no-repeat.
Repeat will be assumed if the empty string or null is specified.
ii) Create Shadows
Canvas have the capability of creating shadows around the drawings. These drawing operations are affected by the following attributes:
a) shadowColor [=value]
The current shadow color is returned and can be set for changing the shadow color by using this property.
b) shadowOffsetX [=value]
The current shadow offset X is returned and set for changing the shadow offset X by using this property.
c) shadowOffsetY [=value]
The current shadow offset Y is returned and set for changing the shadow offset Y by using this property.
d) shadowBlur [=value]
The current level of blur applied to the shadows is returned and is set to change the level of blur by this property.
