Latest web development tutorials

HTML5 Canvas

<Canvas> tag custom graphics, such as charts and other images, you must use a script to draw graphics.

In the canvas (Canvas) draw a red rectangle, gradient rectangle, colored rectangles, and some colored text.

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

What is Canvas?

HTML5 <canvas> element is used to draw graphics using scripting (usually JavaScript) to complete.

<Canvas> tag is a graphical container, you must use a script to draw graphics.

You can use Canva draw paths, boxes, circles, characters, and adding images through a variety of methods.


Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support <canvas> element.

Note: Internet Explorer 8 and earlier versions of IE browser does not support <canvas> element.


Create a canvas (Canvas)

A canvas page is a rectangle is drawn through the <canvas> element.

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

<Canvas> Simple examples are as follows:

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

Note: The label usually need to specify an id attribute (the script often cited), size, width and height attributes define the canvas.

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

Using the style attribute to add a border:

Examples

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

try it"


Use JavaScript to draw graphics

canvas element itself is not drawing power. All work must be drawn in JavaScript done internally:

Examples

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

try it"

Analysis examples:

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 has several methods for drawing paths, boxes, circles, characters, and adding images.

The following two lines of code to draw a red rectangle:

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

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

fillRect (x, y, width,height) method defines a rectangle filled with the current method.


Canvas coordinates

canvas is a two-dimensional grid.

canvas upper left corner coordinates (0,0)

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

This means: Draw a 150x75 rectangle on the canvas from the top left corner (0,0).

Examples of coordinates

As shown below, X and Y coordinates of the canvas on the canvas for painting positioning. The movement of the mouse rectangle, display location coordinates.

X
Y

Canvas - Path

On Canvas painting line, we will use the following two methods:

  • moveTo(x, y) coordinates define a line beginning
  • lineTo(x, y) coordinates to define the end of the line

Draw a line we must use the "ink" methods, like stroke ().

Examples

Define start coordinates (0,0), and end coordinates (200, 100) and then use the stroke () method to draw the line:

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

try it"

Draw a circle in the canvas, we will use the following method:

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

In fact, we used the "ink" approach when drawing a circle, such as stroke () or fill ().

Examples

Use arc () method to draw a circle:

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

try it"


Canvas - Text

Use canvas to draw text, important properties and methods as follows:

  • font - define the font
  • fillText (text, x, y)- Draws a solid text on canvas
  • strokeText (text, x, y)- drawing on canvas hollow text

Use fillText ():

Examples

Use "Arial" font rendering a high 30px text (solid) on the canvas:

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

try it"

Use strokeText ():

Examples

Use "Arial" font rendering a high 30px text (hollow) on canvas:

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

try it"


Canvas - Gradient

Gradient can be filled in rectangles, circles, lines, text, etc., various shapes can define different colors.

Here are two different ways to set 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 a gradient object, you must use two or more stop color.

addColorStop () method to specify color stops, use coordinates to describe the parameters that can be 0-1.

Using the Gradient setting fillStyle or strokeStyle value gradient, and then draw shapes, such as rectangles, text, or a line.

Use createLinearGradient ():

Examples

Create a linear gradient. Use gradient fill rectangle:

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

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 with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

try it"

Use createRadialGradient ():

Examples

Create a radial / circular gradient. Use gradient fill rectangle:

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

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 with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

try it"


Canvas - Images

The one image onto the canvas, using the following methods:

  • drawImage(image, x, y)

Use an image:

The Scream

Examples

The image is placed on a canvas:

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

try it"


HTML Canvas Reference Manual

Complete property of the label can refer Canvas reference manual.

The HTML <canvas> Tag

Tag 描述
<canvas> HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。