Canvas element in HTML5

Element "canvas tag" in HTML used to draw graphics for web pages. So what is the content of the canvas, how to use it, and you can learn with TipsMake through this article.

What is canvas?

Element "canvas tag" used to draw simple word graphic elements such as lines to complex graphics (lines, boxes, circles, lettering, image insertion .).

"canvas tag" Similar to other HTML tags, to use, you must place a tag "canvas tag" at the position you want to display. However, the most obvious difference is that its content is built from Javascript.

"canvas tag" only function contains graphics objects. You must use JavaScript to draw.

Coordinates in canvas

Canvas uses 2-dimensional coordinates, with the upper left corner being the original coordinates (0,0)

1. X: horizontal coordinates, gradually increasing from left to right
2. Y: Vertical coordinates, gradually increasing from top to bottom

Canvas element in HTML5 Picture 6

Declare Canvas

Canvas is a rectangular area on an HTML page. By default, a canvas is borderless and contains no content.

Note: Always set the id attribute (to be called in the script), the width and height attributes to set the size of the canvas. If no size is specified, the default size is 300px in width and 150px in height.

To add a border, use the style attribute as follows

Some drawing commands "canvas tag"

Draw straight lines in Canvas

To draw a line on a canvas object, we will use the following function:

1. moveTo (x, y): determines the starting point
2. lineTo (x, y): determine the end point

Often, to draw the first lines, we call beginPath () to initialize a new path (it contains the set of line commands to draw).

Finally, to execute the drawing, call the stroke function ().

Draw circular arc - circle in Canvas

To draw a circular arc - a circle, we use the command: arc (x, y, r, start, stop)

1. x and y: center coordinates
2. r: is the radius
3. start: is the starting angle
4. end: is the ending angle

Results

Canvas element in HTML5 Picture 9

Writing words in Canvas

To write a paragraph, focus on the following properties and functions:

1. font: define the font style for the paragraph.
2. fillText (text, x, y): Write text on canvas.
3. strokeText (text, x, y): Write the text on the canvas but not the text.

Result:

Canvas element in HTML5 Picture 10

Gradient color (Linear change color) in Canvas

There are 2 types of gradients:

1. createLinearGradient (x, y, x1, y1): Color scan comes from one side, four parameters represent the starting point (x, y) and the end point (x1, y1) of the gradient.
2. createRadialGradient (x, y, r, x1, y1, r1): Scanning color comes from the center, the first set of parameters defines a circle with center coordinates (x, y) and radius r starts; and the second set of parameters is circle with center coordinates (x1, y1 ) and radius r1 ending gradient.

The addColorStop () function specifies a stop color scan along the scan point (gradient). The gradient points can be any between 0 and 1.

After setting the gradient, we use fillStyle or strokeStyle to assign the gradient to the canvas cell,

For example: Use createLinearGradient ()

Results

Canvas element in HTML5 Picture 11

For example: Use createRadialGradient ()

Results

Canvas element in HTML5 Picture 12

Marvin Fry

Update 25 May 2019