HTML Canvas Graphics - Dofactory

HTML Canvas HTML CharSet Symbols HTML SVG

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.

Example

#

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> Try it live

Using canvas

#

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.

Drawing a line with Canvas

#

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> Try it live

Drawing a circle with Canvas

#

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> Try it live

Drawing text with Canvas

#

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> Try it live

Drawing stroke text with Canvas

#

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> Try it live

Drawing a linear gradient color with Canvas

#

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> Try it live

Drawing a circular gradient color with Canvas

#

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> Try it live

Did you know?

#

Using canvas to create fast animations

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. Try it live

Animation courtesy of www.mozilla.org.

Browser Support

#

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.

You may also like

#

• Our HTML canvas Tag Reference
• Our HTML img Tag Reference
• Our HTML SVG Tutorial
• Our CSS Images Tutorial

CharSet Symbols HTML SVG