HTML5 <canvas> elements are used for drawing drawings, which are done by script (usually JavaScript)

HTML5 <canvas> elements are used for drawing drawings, which are done by script (usually JavaScript)

<canvas> tags are just graphics containers, you must use scripts to draw graphics

You can use canvas to draw paths \ Boxes \ Circles and add images in several ways

Create a canvas (canvases)

A canvas is a rectangular box in a Web page that is drawn by the <canvas> element.

Note: The <canvas> element does not have a border and content by default.

<canvas> simple examples are as follows:

<canvas id= "MyCanvas" width= "height=" ></canvas>

Note: Labels typically need to specify an id attribute (often referenced in the script), and 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 property to add a border:

<canvas id= "MyCanvas" width= "$" height= "100"

Style= "border:1px solid #000000;" >

</canvas>

Use JavaScript to draw images

The canvas element itself is not capable of drawing. All the drawing work must be done inside JavaScript:

<script>

var C=document.getelementbyid ("MyCanvas");

var Ctx=c.getcontext ("2d");

Ctx.fillstyle= "#FF0000";

Ctx.fillrect (0,0,150,75);

</script>

Instance parsing:

First, find the <canvas> element:

var C=document.getelementbyid ("MyCanvas");

Then, create the context object:

var Ctx=c.getcontext ("2d");

GetContext ("2d") objects are built-in HTML5 objects that have a variety of drawing paths, rectangles, circles, characters, and methods for adding images.

The following two lines of code draw a red rectangle:

Ctx.fillstyle= "#FF0000";

Ctx.fillrect (0,0,150,75);

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

The FillRect (X,y,width,height) method defines how the rectangle is currently filled.

Canvas coordinates

A canvas is a two-dimensional grid.

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

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

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

Coordinate instances

As shown, the X and Y coordinates of the canvas are used to position the drawing on the canvas. The mouse moves the rectangle box, showing the positioning coordinates.

X

Y

Canvas-Path

To draw a line on the canvas, we will use the following two methods:

MoveTo (x, y) defines line start coordinates

LineTo (x, y) defines line end coordinates

To draw a line we must use the "ink" method, just like a stroke ().

Instance

Defines 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 the canvas, we will use the following methods:

Arc (X,y,r,start,stop)

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

Instance

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

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

font-Define Fonts

Filltext (Text,x,y)-draws solid text on canvas

Stroketext (text,x,y)-Draw hollow text on canvas

Using Filltext ():

Instance

Use the "Arial" font to draw a high 30px of 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);

Using Stroketext ():

Instance

Use the "Arial" font to draw a high 30px 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);

Try it?

Canvas-Gradient

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

There are two different ways to set up the canvas gradient:

Createlineargradient (x,y,x1,y1)-Create a line gradient

Createradialgradient (X,Y,R,X1,Y1,R1)-Create a radial/circle gradient

When we use a Gradient object, you must use two or more stop colors.

The Addcolorstop () method specifies that the color stops, and the parameters are described using coordinates, which can be between 0 and 1.

Using a gradient, set the value of FillStyle or Strokestyle to a gradient, and then draw a shape, such as a rectangle, text, or a line.

Using Createlineargradient ():

Instance

Creates 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 with Gradient

CTX.FILLSTYLE=GRD;

Ctx.fillrect (10,10,150,80);

Try it?

Using Createradialgradient ():

Instance

Creates 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 with Gradient

CTX.FILLSTYLE=GRD;

Ctx.fillrect (10,10,150,80);

Canvas-Images

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

DrawImage (Image,x,y)

Using images:

The Scream

Instance

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);

HTML5 <canvas> elements are used for drawing drawings, which are done by script (usually JavaScript)