canvas tag
Advertisements
<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> | Yes | Yes | Yes | Yes | Yes |
Google Advertisment