HTML 5 canvas

HTML 5 Canvas

The canvas element is used to draw graphics on the web page.

What is Canvas?

The canvas element of HTML5 uses JavaScript to draw images on web pages.

The canvas is a rectangular area, and you can control every pixel of it.

Canvas has multiple methods for drawing paths, rectangles, circles, characters, and adding images.

Create Canvas element

Add the canvas element to the HTML5 page.

Specify the id, width and height of the element:

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

 

Draw with JavaScript

The canvas element itself has no drawing capabilities. All 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 id to find the canvas element:

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

 

Then, create a context object:

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

 

The getContext ("2d") object is a built-in HTML5 object, with multiple methods for drawing paths, rectangles, circles, characters, and adding images.

The following two lines of code draw a red rectangle:

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

 

The fillStyle method dyes it red, and the fillRect method specifies the shape, position, and size.

Understand the coordinates

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

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

As shown in the figure below, the X and Y coordinates of the canvas are used to position the painting on the canvas.

 

More Canvas instances

The following are more examples of painting on canvas elements:

Example-Line

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

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 element:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

Example-Round

Draw a circle by specifying 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 element:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

Example-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 element:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

Example-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 element:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>