A canvas in HTML is an area where graphics can be drawn with Javascript.
The <canvas> tag creates the graphic container.
JavaScript then draws paths, shapes, text, images, etc. inside this container.
A <canvas> element with JavaScript drawing code.
<canvas id="can-id" width="120" height="120"></canvas>
<script>
( () => {
let canvas = document.getElementById("can-id");
let context = canvas.getContext("2d");
context.fillStyle = "orangered";
context.fillRect(10, 10, 100, 100);
context.fillStyle = "purple";
context.fillRect(30, 30, 60, 60);
} )();
</script>
The <canvas> tag creates a graphics container of a given width and height.
JavaScript draws shapes, such as lines, circles, text, and images inside the container.
Canvas supports advanced drawing functions including shapes, clipping, transformations, and more.
Using moveto, lineto, and stroke functions to draw a diagonal line across the canvas.
<canvas id="canvas1" width="200" height="100"
style="border:1px solid slategray;">
</canvas>
<script>
(() => {
let canvas = document.getElementById("canvas1");
let context = canvas.getContext("2d");
context.moveTo(0, 0);
context.lineTo(200, 100);
context.stroke();
})();
</script>
Using beginPath, arc, and stroke functions to draw a circle on the canvas.
<canvas id="canvas2" width="200" height="100"
style="border:1px solid slategray;">
</canvas>
<script>
(() => {
let canvas = document.getElementById("canvas2");
let context = canvas.getContext("2d");
context.beginPath();
context.arc(95, 50, 40, 0, 2 * Math.PI);
context.stroke();
})();
</script>
Using the fillText function to draw text on a canvas.
<canvas id="canvas3" width="200" height="100"
style="border:1px solid slategray;">
</canvas>
<script>
(() => {
let canvas = document.getElementById("canvas3");
let context = canvas.getContext("2d");
context.font = "28px Arial";
context.fillText("Hello Canvas", 10, 50);
})();
</script>
Using the strokeText function to draw stroke text (i.e. vector-based text) on the canvas.
<canvas id="canvas4" width="200" height="100"
style="border:1px solid slategray;">
</canvas>
<script>
(() => {
let canvas = document.getElementById("canvas4");
let context = canvas.getContext("2d");
context.font = "28px Arial";
context.strokeText("Hello Canvas", 10, 50);
})();
</script>
This example fills a rectangle with a linear color gradient.
JavaScript first creates a linear color gradient with createLinearGradient and addColorStop.
This gradient it then used to fill and draw the rectangle with the fillRect function.
<canvas id="canvas5" width="200" height="100"
style="border:1px solid slategray;">
</canvas>
<script>
(() => {
let canvas = document.getElementById("canvas5");
let context = canvas.getContext("2d");
let gradient = context.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "lightblue");
gradient.addColorStop(1, "white");
context.fillStyle = gradient;
context.fillRect(10, 10, 150, 80);
})();
</script>
This example fills a rectangle with a circular color gradient.
JavaScript first creates a circular color gradient with createCircularGradient and addColorStop.
This gradient it then used to fill and draw the rectangle with the fillRect function.
<canvas id="canvas6" width="200" height="100"
style="border:1px solid slategray;">
</canvas>
<script>
(() => {
let canvas = document.getElementById("canvas6");
let context = canvas.getContext("2d");
let gradient = context.createRadialGradient(75, 50, 5, 90, 60, 100);
gradient.addColorStop(0, "lightblue");
gradient.addColorStop(1, "white");
context.fillStyle = gradient;
context.fillRect(10, 10, 150, 80);
})();
</script>
Canvas is very fast, which allows you to create interesting animations.
Below is an animation of the solar system created with <canvas>, CSS, and JavaScript.
Animation courtesy of www.mozilla.org.
Here is when <canvas> support started for each browser:
 Chrome
|
4.0 | Jan 2010 |
 Firefox
|
2.0 | Oct 2006 |
 IE/Edge
|
9.0 | Mar 2011 |
 Opera
|
9.0 | Jun 2006 |
 Safari
|
3.1 | Mar 2008 |
For details on <canvas>, see our HTML canvas Tag Reference.
