Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

HTML

Learn step by step



HTML5 Canvas

In this chapter we would be covering Canvas element.
<canvas> .... </canvas>
This is another form of graphical representation.
The CANVAS Element requires scripting code along with it in order to work. This has reduced a lot of effort to use external plug-in like Photoshop and another Graphic Softwares. Still there are lot of stuffs that can not be done with canvas but for creating normal frame and graph it is sufficient. SVG as discussed in previous tutorial is another way of graphical representation.

CANVAS Syntax

<canvas>
Canvas Related Text here
</canvas>
<script>
Some scripting code
</script>
Canvas - Text Using strokeText():

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
</script>
</body>
</html>

Output

Your browser does not support the HTML5 canvas tag.


<!DOCTYPE html>
<html>
<head>
<title>Title name will go here</title>
</head>
<body>
<canvas id="canvasuses" width="180" height="90">
<p>Your browser does not support the HTML5 canvas element.</p>
</canvas>
<script type="text/javascript">
var c=document.getElementById("canvasuses");
var canvOK=1;
try {c.getContext("2d");}
catch (er) {canvOK=0;}
if (canvOK==1)
{
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"green");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
}
</script>
</body>
</html>

Output

Your browser does not support the HTML5 canvas element.

HTML5 Canvas Examples:
ExamplesDescription
Drawing Rectangles

Draw rectangles using <canvas> element

Drawing Paths

Create various shapes using paths in HTML5 <canvas> element

Drawing Lines

Drawing lines using HTML5 <canvas> element

Drawing Bezier

Drawing bezier curve using HTML5 <canvas> element

Drawing Quadratic

Drawing quadratic curve using HTML5 <canvas> element

Using Images

Create images with HTML5 <canvas> element

Create Gradients

Create gradients using HTML5 <canvas> element

Styles and Colors

Apply styles and colors using HTML5 <canvas> element

Text and Fonts

Draw amazing text using different fonts and their size.

Pattern and Shadow

Draw different patterns and drop shadows.

Canvas States

Discover how to save and restore canvas states while doing complex drawings on a canvas.

Canvas Translation

Move the canvas and its origin to a different point in the grid.

Canvas Rotation

Rotate the canvas around the current origin.

Canvas Scaling

Increase or decrease the units in a canvas grid.

Canvas Transform

Modify transformation matrix directly.

Canvas Composition

Masks certain areas and sections.

Canvas Animation

Create basic animation using HTML5 canvas and Javascript.



Related Videos