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)
- X: horizontal coordinates, gradually increasing from left to right
- Y: Vertical coordinates, gradually increasing from top to bottom
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:
- moveTo (x, y): determines the starting point
- 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)
- x and y: center coordinates
- r: is the radius
- start: is the starting angle
- end: is the ending angle
Results
Writing words in Canvas
To write a paragraph, focus on the following properties and functions:
- font: define the font style for the paragraph.
- fillText (text, x, y): Write text on canvas.
- strokeText (text, x, y): Write the text on the canvas but not the text.
Result:
Gradient color (Linear change color) in Canvas
There are 2 types of gradients:
- 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.
- 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
For example: Use createRadialGradient ()
Results
You should read it
- How to use the NVIDIA Canvas app
- Mobile canvas house - Video instruction for removing canvas frame
- Gradient - color linear transformation in CSS
- Instructions to turn off the Spotify Canvas feature
- How to Clean Old Paintings on Canvas
- How to use Chrome Canvas to paint on a browser
- Firefox offers the same security features as the Tor browser
- 'Super lovely' palm tree cloth bag
May be interested
- Pseudo-Element in CSSpseudo-element in css is used to add special formats to a selector
- Firefox offers the same security features as the Tor browsermozilla engineers have borrowed a feature from the tor browser and will upload it to firefox 58, without saving the user's footprint with html5 canvas.
- HTML5 support on browsersyou can teach browsers how to handle html5 properly.
- How to Clean Old Paintings on Canvascanvas paintings can be a beautiful addition to your home or workspace, but they can start looking a little worse for wear after a while. if your artwork is framed, take a few minutes to remove the canvas and set it aside before you get to...
- 12 stunning HTML5 templates that web designers should not ignorethere are many free html5 templates online and choose one of them that can make it difficult for many people. therefore, the article scoured the internet to bring you stunning html5 templates for business, personal, portfolio profiles, and all other types of websites.
- 6 websites show the power of HTML5html5, the new step of html, promises to bring the web experience to a new stage by allowing the browser to make many interesting things with data and images.
- Computer code element in HTMLelements used to display computer code data in the browser
- HTML editor onlineonline html editor supports html5, when you type the opening tag automatically generates a closed tag, can detect errors related to the syntax when you are editing with the square icon with the x mark right on the error code line.
- How to use Chrome Canvas to paint on a browserchrome canvas is an application for drawing and annotating online on chrome browser for phones and computers.
- Block and inline elements in HTMLeach element in html has a default display value, depending on which element it is.