<canvas> is an HTML element which can be used to draw graphics using scripting language. This can, for instance, be used to draw graphs, make photo composition or simple animations.
What is HTML Canvas?
- The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.
- The <canvas> element is only a container for graphics.
- You must use JavaScript to actually draw the graphics.
- Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
Browser Support Canvas
| Element |
Chrome |
Edge |
Firefox |
Safari |
Opera |
| <canvas> |
4.0 |
9.0 |
2.0 |
3.1 |
9.0 |
The <canvas> element is not supported in some older browsers, but is supported in recent versions of all major browsers.
The default size of the canvas is 300 px × 150 px (width × height). But custom sizes can be defined using the HTML height and width property.
Canvas Example
<canvas id="myCanvas" width="200" height="100"></canvas>
Output
Draw a Line
<script>
var c = document.getElementById("myCanvasline");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
Drow a Circle
<script>
var c = document.getElementById("myCanvascircle");
var ctx = c.getContext("2d");
ctx.begainPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
Drow a Text
<script>
var c = document.getElementById("myCanvasText");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
<script>
var c = document.getElementById("myStrokeText");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
Drow Linear and Circular Gradient
<script>
var c = document.getElementById("myLinear");
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>
<script>
var c = document.getElementById("myCircular");
var ctx = c.getContext("2d");
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "green");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
The <canves> Element
The <canves> element has only two attributes, width and height. These are both optional and can also be set using DOM properties. When no width and height attributes are specified, the canvas will initially be 300 pixels width and 150 pixels hight.
Draws two intersecting rectangles
<script>
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(200, 0, 0)';
ctx.fillRect(10, 10, 50, 50);
ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
ctx.fillRect(30, 30, 50, 50);}
</script>
To learn more about Canvas & SVG
HTML Canvas Tutorials
HTML SVG Tutorials