canvas tag


Prev Tutorial Next Tutorial

<canvas> tag

Html5 introduce new tag <canvas> which is used to draw graphics on the web page. It draw graphics on web by using JavaScript.

canvas is only a container for graphics you must need to write a script to draw graphics on web page.

Simple canvas

Example

<!DOCTYPE>
<html>
<body>
<canvas id="canvasid" width="200" height="100" style="border:3px solid #F00;">
</canvas>
</body>
</html>

Result

canvas with javascript

Example

<!DOCTYPE>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:3px solid #FDFF06;">
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,100);
</script>
</body>
</html>

Result

Here ctx.fillRect(0,0,150,100); in this code 0,0 is starting point to fill color from x-axis and y-axis respectively and 150 indicate fill rectangle from 0 to 150 x-axis and 100 indicate fill rectangle from 0 to 100 y-axis.

Draw a line

For draw a line on the canvas, you need following methods;

  • moveTo(x,y): It is used to define the starting point of the line.
  • lineTo(x,y): It is used to define the ending point of the line.
  • stroke(): It is used to draw a line

Example

<!DOCTYPE>
<html>
<body>
<canvas id="myCanvasLine" width="200" height="100" style="border:2px solid #000;">
</canvas>
<script>
var c = document.getElementById("myCanvasLine");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>

Result

Draw a Circle

To draw a circle you need arc() method;

Syntax

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

Example

<!DOCTYPE>
<html>
<body>
<canvas id="myCanvasCircle" width="200" height="100" style="border:1px solid #000;">
</canvas>
<script>
var c = document.getElementById("myCanvasCircle");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();  
</script>
</body>
</html>

Result

Drawing text on canvas

For Drawing text on canvas, you need following methods;

  • font property: It is used to define the font property for the text.
  • fillText(text,x,y) method: It is used to draw filled text on the canvas. It looks like bold font.
  • strokeText(text,x,y) method: It is also used to draw text on the canvas, but the text is unfilled.

Example

<!DOCTYPE>
<html>
<body>
<canvas id="myCanvasText1" width="200" height="100" style="border:2px solid #000;">
</canvas>
<script>
var c = document.getElementById("myCanvasText1");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello Word !",10,50);
</script>
</body>
</html>

Result

Drawing text on canvas using strokeText() method

Example

<!DOCTYPE>
<html>
<body>
<canvas id="myCanvasText2" width="320" height="100" style="border:2px solid #000;">
</canvas>
<script>
var c = document.getElementById("myCanvasText2");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello Tutorial4us.com",10,50);
</script>
</body>
</html>

Result

Browser supported

Element
<canvas>YesYesYesYesYes

Prev Tutorial Next Tutorial

Advertisements
Download Projects