HTML5 's Cavans

The canvas element is used to draw graphics on a Web page.

What is Canvas?

The HTML5 canvas element uses JavaScript to draw an image on a Web page.

The canvas is a rectangular area where you can control each pixel.

Canvas has several ways to draw paths, rectangles, circles, characters, and add images.

Create a Canvas element

Add a canvas element to the HTML5 page.

Specify the ID, width, and height of the element:

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

Using JavaScript to draw

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

<script type= "Text/javascript" >var C=document.getelementbyid ("MyCanvas"); var cxt=c.getcontext ("2d"); Cxt.fillstyle= "#FF0000"; Cxt.fillrect (0,0,150,75);</script>

JavaScript uses the ID to find the canvas element:

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

Then, create the context object:

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:

The FillStyle method dyes it red, and the FillRect method specifies the shape, position, and size.

Understanding coordinates

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

As shown, the X and Y coordinates of the canvas are used to position the drawing on the canvas.

Example: hover the mouse over a rectangle to see the coordinates

More Canvas instances

The following are more examples of painting on a canvas element:

Instance-line

Draw a line by specifying where to start and where to end it:

JavaScript Code:

<script type= "Text/javascript" >var C=document.getelementbyid ("MyCanvas"); var cxt=c.getcontext ("2d"); Cxt.moveto (10,10); Cxt.lineto (150,50); Cxt.lineto (10,50); Cxt.stroke ();</script>

Canvas elements:

<canvas id= "MyCanvas" width= "$" height= ">your Browser" not support the canvas does

Try it yourself.

Example-round

Draw a circle by stipulating the size, color, and position:

JavaScript Code:

<script type= "Text/javascript" >var C=document.getelementbyid ("MyCanvas"); var cxt=c.getcontext ("2d"); Cxt.fillstyle= "#FF0000"; Cxt.beginpath (); Cxt.arc (70,18,15,0,math.pi*2,true); Cxt.closepath (); Cxt.fill (); </ Script>

Canvas elements:

<canvas id= "MyCanvas" width= "$" height= ">your Browser" not support the canvas does

Try it yourself.

Instance-Gradient

Use the color you specify to draw the gradient background:

JavaScript Code:

<script type= "Text/javascript" >var C=document.getelementbyid ("MyCanvas"); var cxt=c.getcontext ("2d"); var grd= Cxt.createlineargradient (0,0,175,50); Grd.addcolorstop (0, "#FF0000"); Grd.addcolorstop (1, "#00FF00"); Cxt.fillstyle =grd;cxt.fillrect (0,0,175,50);</script>

Canvas elements:

<canvas id= "MyCanvas" width= "$" height= ">your Browser" not support the canvas does

Try it yourself.

Instance-image

Place an image on the canvas:

JavaScript Code:

<script type= "Text/javascript" >var C=document.getelementbyid ("MyCanvas"); var cxt=c.getcontext ("2d"); var img= New Image () img.src= "Flower.png" Cxt.drawimage (img,0,0);</script>

Canvas elements:

<canvas id= "MyCanvas" width= "$" height= ">your Browser" not support the canvas does

HTML5 's Cavans