Html 5 Canvas

canvas in html

The HTML 5 Canvas element is used to draw graphics that include everything from simple line to complex graphic object.

The HTML 5 <canvas> tag is used to draw graphics using scripting language like JavaScript.

It is a low level, procedural model that updates a bitmap and does not have a built-in scene.

There are several methods in canvas to draw paths, boxes, circles, text and add images.


How to create canvas?

A canvas is a rectangle like area on an  HTML page. It is specified with canvas element. By default, the

<canvas> element has no border and no content, it is like a container.

Example:

<canvas id = “mycanvas” width =”200″ height =”100″> </canvas>
HTML 5 Canvas Tag Example:
<canvas id=”myCanvas1″ width=”300″ height=”100″ style=”border:2px solid;”>
Your browser does not support the HTML5 canvas tag.
</canvas>

HTML Canvas Tag with JavaScript:

A canvas is a two dimensional grid.

Coordinates (0,0) defines the upper left corner of the canvas. The parameters (0,0,200,100) is used for fillRect() method. This parameter will fill the rectangle start with the upper-left corner (0,0) and draw a 200 * 100 rectangle.

Example:

<canvas id=”myCanvas” width=”250″ height=”150″ style=”border:1px solid #c3c3c3;”>
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById(“myCanvas”);
var ctx = c.getContext(“2d”);
ctx.fillStyle = “#FF0000”;
ctx.fillRect(0,0,200,100);
</script>

Drawing Line on Canvas:

If you want to draw a straight line on the canvas, you can use the following two 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.

If you draw a line which starting point is (0,0) and the end point is (200,100), use the stroke method to draw the line.

Example:

<canvas id=”myCanvasLine” width=”200″ height=”100″ style=”border:1px solid #d3d3d3;”>
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById(“myCanvasLine”);
var ctx = c.getContext(“2d”);
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

Drawing Circle on Canvas:

If you want to draw a circle on the canvas, you can use the arc() method:

Example:

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

To sketch circle on HTML canvas, use one of the ink() methods, like stroke() or fill().

Example:

<canvas id=”myCanvasCircle” width=”200″ height=”100″ style=”border:1px solid #d3d3d3;”>
Your browser does not support the HTML5 canvas tag.</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>

Drawing text on canvas:

There are property and methods used for drawing text on the canvas.

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.


Let’s see fillText() method example.

<canvas id=”myCanvasText1″ width=”300″ height=”100″ style=”border:1px solid #d3d3d3;”>
Sorry! Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById(“myCanvasText1”);
var ctx = c.getContext(“2d”);
ctx.font = “30px Arial”;
ctx.fillText(“Hi! Edusite”,10,50);
</script>

Let’s see strokeText()method example.

<canvas id=”myCanvasText2″ width=”300″ height=”100″ style=”border:1px solid #d3d3d3;”>
 Sorry!Upgrade your browser. It does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById(“myCanvasText2”);
var ctx = c.getContext(“2d”);
ctx.font = “30px Arial”;
ctx.strokeText(“Hi! Edusite”,10,50);
</script>

Recommended Posts:

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *