HTML5 Basic Tutorial

HTML5 API

HTML5 Media

HTML5 Graphics

HTML5 Canvas

The <canvas> is an HTML5 A new HTML element that can be used to draw images with scripts (usually JavaScript) within it. It can be used to create photo albums or make simple (but not so simple) animations, even real-time video processing and rendering.

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 The <canvas> element is used for drawing graphics, completed through scripts (usually JavaScript).

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

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

Browser Support

The numbers in the table represent the first browser version number that supports the <canvas> element.

element
<canvas>	4.0	9.0	2.0	3.1	9.0

Create a canvas (Canvas)

A canvas in a web page is a rectangular box, drawn through the <canvas> element.

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

<canvas> simple example as follows:

<canvas id="myCanvas" width="200" height="100"></canvas>

Note: The tag usually needs to specify an id attribute (often referenced in scripts), The width and height properties 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:

Example

<!DOCTYPE html><html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial Website(oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
</body>
</html>

Test See ‹/›

Drawing images using JavaScript

The canvas element itself has no drawing capabilities. All drawing work must be completed within JavaScript:

Example

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="10" style="border:1px solid #c3c3c3>
Your browser does not support HTML5　canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>

Test See ‹/›

Example Explanation:

First, find the <canvas> element:

var c=document.getElementById("myCanvas");

Then, create the context object:

var ctx=c.getContext("2d");

getContext("2d) object is a built-in HTML5 Object, with various drawing methods such as paths, rectangles, circles, text, and adding images.

The following two lines of code draw a red rectangle:

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

The fillStyle property can be a CSS color, gradient, or pattern. fillStyle The default setting is #000000 (black).

fillRect(x,y,width,height) method defines the current fill style of the rectangle.

Canvas Coordinates

canvas is a two-dimensional grid.

The top left corner coordinates of the canvas are (0,0)

The above fillRect method has parameters (0,0,150,75)。

Means: Draw 150x75 rectangle, starting from the top left corner (0,0).

Coordinate example

As shown in the figure below, the X and Y coordinates of the canvas are used to locate the painting on the canvas. The rectangular box where the mouse moves displays the location coordinates.

Canvas - Path

To draw lines on Canvas, we will use the following two methods:

moveTo(x,y) to define the start coordinate
lineTo(x,y) to define the end coordinate

To draw lines, we must use the "ink" method, like stroke().

Example

Define the starting coordinate (0,0), and the ending coordinate (200,100)。Then use the stroke() method to draw the line:

JavaScript:

Example

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="10" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>

Test See ‹/›

To draw circles in canvas, we will use the following methods:

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

In fact, when drawing circles, we use the "ink" method, such as stroke() or fill().

Example

Use the arc() method to draw a circle:

JavaScript:

Example

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="10" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>　
</body>
</html>

Test See ‹/›

Canvas - Text

The important properties and methods for drawing text with canvas are as follows:

font - Define font
fillText(text,x,y) - Draw solid text on canvas
strokeText(text,x,y) - Draw hollow text on canvas

Using fillText():

Example

Draw a high 30px solid text:

JavaScript:

Example

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="10" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font="30px　Arial";
ctx.fillText("Hello　World",10,50);
</script>
</body>
</html>

Test See ‹/›

Using strokeText():

Example

Draw a high 30px hollow text:

JavaScript:

Example

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="10" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font="30px　Arial";
ctx.strokeText("Hello　World",10,50);
</script>
</body>
</html>

Test See ‹/›

Canvas - 　Gradient

Gradients can be filled in rectangles, circles, lines, text, and so on, and different shapes can define different colors by themselves.

There are two different ways to set the Canvas gradient:

createLinearGradient(x,y,x1,y1) - Create line gradient
createRadialGradient(x,y,r,x1,y1,r1) - Create a radial/Circular gradient

When using gradient objects, it is necessary to use two or more stop colors.

The addColorStop() method specifies color stops, the parameters use coordinates to describe, which can be 0 to1.

Apply gradient, set the fillStyle or strokeStyle value to Apply gradient, then draw shapes, such as rectangles, text, or a line.

using createLinearGradient():

Example

Create a linear gradient. Use gradient to fill a rectangle:

JavaScript:

Example

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="10" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.</canvas>
<script>
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);
</script>
</body>
</html>

Test See ‹/›

using createRadialGradient():

Example

Create a radial/Circular gradient. Use gradient to fill a rectangle:

JavaScript:

Example

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<canvas id="myCanvas" width="200" height="10" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.</canvas>
<script>
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);
</script>
</body>
</html>

Test See ‹/›

Canvas - Image

Place an image on the canvas, using the following method:

drawImage(image,x,y)

Use image:

Example

Place an image on the canvas:

JavaScript:

Example

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="3" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
img.onload = function() {
　　　　ctx.drawImage(img,10,10);
}　
</script>
</body>
</html>

Test See ‹/›

HTML Canvas Reference Manual

The complete attributes of the tag can be referred toCanvas Reference Manual.

HTML <canvas> Tag

Tag	Description
<canvas>	HTML5 The canvas element uses JavaScript to draw images on web pages.

HTML5 Inline SVG HTML5 New Elements

HTML5 Basic Tutorial

HTML5 API

HTML5 Media

HTML5 Graphics

HTML5 Canvas

What is canvas?

Browser Support

Create a canvas (Canvas)

Drawing images using JavaScript

Canvas Coordinates

Canvas - Path

Example

Example

Canvas - Text

Example

Example

Canvas - Gradient

Example

Example

Canvas - Image

Use image:

Example

HTML Canvas Reference Manual

HTML <canvas> Tag

Canvas - 　Gradient