HTML5 Canvas

What is canvas?

HTML5 <canvas> elements are used for drawing graphics, which are done through scripts (usually JavaScript).

<canvas> labels are just graphics containers, and you must use scripts to draw graphics.

You can use it in a variety of ways canvas draw paths, boxes, circles, characters, and add images.

Browser support

The numbers in the table indicate support. <canvas> the first browser version number of the element.

Create a canvas

A canvas is a rectangular frame on a web page, through the <canvas> elements to draw.

Note: by default <canvas> the element has no borders and content.

<canvas> a simple example is as follows:

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

Note: tags usually need to specify an id attribute (often referenced in scripts) width and height the size of the canvas defined by the.

Tip: you can use more than one in the HTML page <canvas> element。

Use style property to add a border:

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

Use JavaScript to draw an image

canvas the element itself does not have the ability to draw. All drawing work must be done within JavaScript:

varc=document.getElementById("myCanvas");varctx=c.getContext("2d");ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);

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

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

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

Canvas coordinates

canvas is a two-dimensional grid.

canvas The coordinates of the upper-left corner of the (0,0)

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

Draw a rectangle of 150x75 on the canvas, starting at the upper left corner (0,0) .

Coordinate instance

As shown in the following figure, 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 box moved by the mouse.

Canvas-path

In Canvas to draw lines, we will use the following two methods:

• moveTo( x,y) define line start coordinates

• lineTo( x,y) define line end coordinates

We have to use the method of “ink” to draw lines, like stroke() .

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

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

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

Canvas-text

Using canvas to draw text, the important properties and methods are as follows:

• font -define fonts

• fillText( text,x,y) -in canvas draw solid text on the

• strokeText( text,x,y) -in canvas draw hollow text on the

Use fillText() :

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

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

Canvas-gradient

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

There are two different ways to set Canvas gradients:

• 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, we must use two or more stop colors.

addColorStop() the method specifies the color stop, and the parameters are described by coordinates, which can be 0 to 1.

Using gradients, settin fillStyle or strokeStyle is a gradient, and then draw a shape such as a rectangle, text, or a line.

Use createLinearGradient() :

varc=document.getElementById("myCanvas");varctx=c.getContext("2d");
//Create gradient vargrd=ctx.createLinearGradient(0,0,200,0);grd.addColorStop
(0,"red");grd.addColorStop(1,"white");//Fill gradient ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

varc=document.getElementById("myCanvas");varctx=c.getContext("2d");
//Create gradient vargrd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");grd.addColorStop(1,"white");
//Fill gradient ctx.fillStyle=grd;ctx.fillRect(10,10,150,80);

Canvas-Ima

To place an image on the canvas, use the following methods:

• drawImage( image,x,y)

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

HTML Canvas reference manual

The complete attributes of the tag can be found in the Canvas reference manual.

HTML < canvas > tag

For more information, it is enough to learn the article HTML5 Canvas.