HTML5 Canvas

---

The <canvas> element defines a container for graphics, such as charts and images. You must use scripts (typically JavaScript) to draw graphics.

Draw a red rectangle, gradient rectangle, colored rectangle, and some colored text on the canvas.

Your browser does not support the HTML5 <canvas> element.

---

What is canvas?

The HTML5 <canvas> element is used for graphics drawing, which is completed through scripts (usually JavaScript).

The <canvas> element is just a container for graphics, and you must use scripts to draw graphics.

You can use canvas to draw paths, boxes, circles, characters, and add images in various ways.

---

Browser Support

The version number of the first browser to support the <canvas> element is represented in the table.

Element
<canvas>	4.0	9.0	2.0	3.1	9.0

---

Creating a Canvas (Canvas)

In a webpage, a canvas is a rectangular box defined by the <canvas> element.

Note:By default, the <canvas> element has no border and no content.

Simple example of <canvas> element:

Note:The <canvas> element usually needs to specify an id attribute (which is often referenced in the script), and the width and height attributes define the size of the canvas.

Tip:You can use multiple <canvas> elements in an HTML page.

Use the style attribute to add a border:

---

Using JavaScript to draw images

The <canvas> element itself does not have drawing capabilities. All drawing work must be done internally in JavaScript:

Example explanation:

First, find the <canvas> element:

Then, create a context object:

getContext("2d") object is a built-in HTML5 object that has multiple methods for drawing paths, rectangles, circles, characters, and adding images.

The following two lines of code draw a red rectangle:

The fillStyle property can be CSS colors, gradients, or patterns. The default fillStyle is #000000 (black).

fillRect(x,y,width,height) method defines the current filling method for the current rectangle.

---

Canvas Coordinates

Canvas is a two-dimensional grid.

The left-top coordinate of the canvas is (0,0).

The fillRect method with parameters (0,0,150,75) means: draw a 150x75 rectangle on the canvas, starting from the top-left corner (0,0).

The coordinate example:

As shown in the figure below, the X and Y coordinates of the canvas are used to position the drawing on the canvas. The mouse-dragged rectangular box displays the positioning coordinates.

Canvas - Paths

---

Canvas - Paths

) Define the starting coordinate of the line

• moveTo(x,y) Define the ending coordinate of the line
• lineTo(x,yTo draw lines, we must use the "ink" method, like stroke().

Example

Actually, when drawing a circle, we use the "ink" method, such as stroke() or fill().

arc(x,y,r,start,stop)

Example

---

Canvas - Text

font - Define the font

• ) - Draw solid text on the canvas
• fillText(text,x,y) - Draw hollow text on the canvas
• strokeText(text,x,yUse fillText():

Example

Example

---

Canvas - Gradients

There are two different ways to set up the Canvas gradient:

) - Create a linear gradient

• createLinearGradient(x,y,x1,y1) - Create a radial/round gradient
• createRadialGradient(x,y,r,x1,y1,r1When using a gradient object, you must use two or more stop colors.

The addColorStop() method specifies the color stop, and the parameters use coordinates to describe, which can be 0 to 1.

Use a gradient, set the fillStyle or strokeStyle value to the gradient, and then draw shapes such as rectangles, texts, or lines.

Use createLinearGradient():

Example

Example

---

Canvas - Images

Using images:

• drawImage(image,x,y)

---

HTML <canvas> Tag

Reference Manual for HTML CanvasHTML <canvas> Tag

Canvas to Image

Tag	The HTML5 <canvas> element uses JavaScript to draw images on a webpage.
<canvas>	For more information, refer to:

Learn HTML5 Canvas this article is enough.Other Extensions

AI thinking in progress...