What is Canvas?
Draw a red rectangle, a gradient rectangle, a colored rectangle, and some colored text on the canvas.
The <canvas> tag is just a graphics container, and you must use a script to draw the graphics.
You can use Canva to draw paths, boxes, circles, characters, and add images in a variety of ways.
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <canvas> element.
Note : The <canvas> element is not supported in browsers of Internet Explorer 8 and earlier versions of IE.
Create a canvas (Canvas)
A canvas is a rectangular box in a web page, drawn by the <canvas> element.
Note : The <canvas> element has no borders and content by default.
A simple example of <canvas> is as follows:
<canvas id="myCanvas" width="200" height="100"></canvas>
Note : Tags usually need to specify an id attribute (often referenced in the script), the size of the canvas defined by the width and height attributes.
Tip : You can use multiple <canvas> elements in your HTML pages.
Use the style attribute to add a border:
Run the program and try it out
First, find the <canvas> element:
Then, create a context object:
The getContext("2d") object is a built-in HTML5 object with a variety of drawing paths, rectangles, circles, characters, and methods for adding images.
The following two lines of code draw a red rectangle:
Set the fillStyle property to be a CSS color, gradient, or pattern. The default setting for fillStyle is #000000 (black).
The fillRect(x,y,width,height) method defines how the rectangle is currently filled.
Canvas is a two-dimensional grid.
The coordinates of the upper left corner of the canvas are (0,0)
The fillRect method above has parameters (0,0,150,75).
This means: draw a 150x75 rectangle on the canvas, starting at the top left corner (0,0).
As shown in the image below, the X and Y coordinates of the canvas are used to position the painting on the canvas. The positioning coordinates are displayed on the rectangular frame where the mouse moves.
Canvas - path
Draw a line on the Canvas, we will use the following two methods:
moveTo(x,y) defines the line start coordinates
lineTo(x,y) defines the line ending coordinates
To draw lines we have to use the "ink" method, just like stroke().
Define the starting coordinates (0,0), and the ending coordinates (200,100). Then use the stroke() method to draw the lines:
To draw a circle in the canvas, we will use the following method:
In fact, we use the "ink" method when drawing a circle, such as stroke() or fill().
Draw a circle using the arc() method:
Canvas - text
Use canvas to draw text. The important properties and methods are as follows:
Font - define the font
fillText(text,x,y) - draw solid text on the canvas
strokeText(text,x,y) - draws hollow text on the canvas
Canvas - Gradient
Gradient can be filled in rectangles, circles, lines, text, etc. Various shapes can define different colors by themselves.
There are two different ways to set the Canvas gradient:
createLinearGradient (x,y,x1,y1) - Create a line gradient
createRadialGradient (x,y,r,x1,y1,r1) - Create a radial/circular gradient
When we use gradient objects, we must use two or more stop colors.
The addColorStop() method specifies that the color stops, and the parameters are described using coordinates, which can be 0 to 1.
Use a gradient, set the value of fillStyle or strokeStyle to a gradient, and then draw a shape such as a rectangle, text, or a line.
Create a linear gradient using createLinearGradient(). Fill the rectangle with a gradient:
Program running result:
Create a radial/circular gradient using createRadialGradient(). Fill the rectangle with a gradient:
Canvas - image
You can put a picture on the canvas so you can do some work on the picture and add some material you want, such as text or something.
Place an image on the canvas using the following method:
Place an image on the canvas:
HTML Canvas Reference Manual
The full properties of the label can be found in the Canvas Reference Manual.
The HTML <canvas> tag