HTML 5 Canvas
The <canvas> tag defines graphics, such as charts and other images. 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.
Create a canvas (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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Novice Tutorial</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</body>
</html>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 the 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 150×75 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.
Canvas-path
To draw lines on Canvas, we will 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
We must use the “ink” method to draw lines, just like stroke().
Example
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
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
var c = document.getElementById(" myCanvas ");
var ctx = c.getContext (" 2d ");
ctx.font = " 30px Arial " ;
ctx.fillText(" Hello World " , 10 , 50); Use strokeText():
Example
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
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 with gradient
ctx.fillStyle = grd;
ctx.fillRect( 10 , 10 , 150 , 80 );Use createRadialGradient():
Example
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 with 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 )
Example
var c = document.getElementById( " myCanvas " );
var ctx = c.getContext( " 2d " );
var img = document.getElementById( " scream " );
ctx.drawImage( img , 10 , 10 ); HTML Canvas Reference Manual
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. |