HTML5 Canvas
The <canvas> tag defines graphics, such as charts and other images, and you must use scripts to draw graphics.
Draw a red rectangle, gradient rectangle, colored rectangle, and some colored text on the canvas.
What is Canvas?
HTML5 <canvas> element is used to draw graphics, which is done by script (usually JavaScript).
The <canvas> tag is just a graphics container, you must use a script to draw the graphics.
You can use canvas to draw paths, boxes, circles, characters and add images in a variety of ways.
Browser support
The number in the table indicates the version number of the first browser that supports the <canvas> element.
Browser | ![]() | ![]() | ![]() | ![]() | ![]() ![]() |
---|---|---|---|---|---|
<canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Create a canvas
A canvas is a rectangular frame in a web page, which is drawn by the <canvas> element.
Note: By default, the <canvas> element has no border or content.
A simple example of <canvas> is as follows:
<canvas id="myCanvas" width="200" height="100"></canvas>
Note: The label usually needs to specify an id attribute (often quoted in scripts), and the size of the canvas defined by the width and height attributes.
Tip: You can use multiple <canvas> elements in HTML pages.
Use the style attribute to add a border:
Example
<canvas id="myCanvas" width="200" height="100"style="border:1px solid #000000;"></canvas>
Use JavaScript to draw images
The canvas element itself has no drawing capabilities. All drawing work must be done inside JavaScript:
Example
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75);
Example analysis:
First, find the <canvas> element:
var c=document.getElementById("myCanvas");
Then, create a context object:
var ctx=c.getContext("2d");
The getContext("2d") object is a built-in HTML5 object with multiple methods for drawing paths, rectangles, circles, characters, and adding images.
The following two lines of code draw a red rectangle:
ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75);
Set fillStyle property can be CSS color, gradient, or pattern. The default setting of fillStyle is #000000 (black).
The fillRect( x,y,width,height ) method defines the current filling method of the rectangle.
Canvas coordinates
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).
Meaning: draw a 150x75 rectangle on the canvas, starting from the upper left corner (0,0).
Coordinate example
As shown in the figure 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 moved by the mouse.
X
Y
Canvas-path
To draw lines on Canvas, we can use the following two methods:
moveTo( x,y ) defines the starting coordinates of the line
lineTo( x,y ) defines the end coordinates of the line
To draw lines, we must use the "ink" method, just like stroke().
Example
Define the start coordinate (0,0), and the end coordinate (200,100). Then use the stroke() method to draw the line:
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100);ctx.stroke();
To draw a circle in canvas, we will use the following method:
arc(x,y,r,start,stop)
In fact, we use the "ink" method when drawing a circle, such as stroke() or fill().
Example
Use the arc() method to draw a circle:
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke();
Canvas-text
Use canvas to draw text, the important properties and methods are as follows:
font-defines the font
fillText( text,x,y ) - draw solid text on canvas
strokeText( text,x,y ) - draw hollow text on canvas
Use fillText():
Example
Use the "Arial" font to draw a 30px high text (solid) on the canvas:
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,50);
Use strokeText():
Example
Use the "Arial" font to draw a 30px high text (hollow) on the canvas:
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.strokeText("Hello World",10,50);
Canvas-gradient
Gradients can be filled in rectangles, circles, lines, texts, etc., and various shapes can be defined with different colors.
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 the color stop, and the parameters are described by coordinates, which can be 0 to 1.
To use a gradient, set the fillStyle or strokeStyle to a gradient, and then draw a shape such as a rectangle, text, or a line.
Use createLinearGradient():
Example
Create a linear gradient. Fill the rectangle with a gradient:
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); // Create gradient var grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill the gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,80);
Use createRadialGradient():
Example
Create a radial/circular gradient. Fill the rectangle with a gradient:
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); // Create gradient var grd=ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill the gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,80);
Canvas-Image
To place an image on the canvas, use the following method:
drawImage( image,x,y )
Use images:
Example
Place an image on the canvas:
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("scream"); ctx.drawImage(img,10,10);
HTML Canvas Reference Manual (under construction)
For the complete attributes of the tag, please refer to the Canvas Reference Manual.
HTML <canvas> Tag
Tag | Description |
---|---|
<canvas> | HTML5's canvas element uses JavaScript to draw images on web pages. |