Search w3schools.com:

SHARE THIS PAGE

HTML5 Canvas

The <canvas> element is used to draw graphics, on the fly, on a web page.

Draw a red rectangle, a gradient rectangle, a multicolor rectangle, and some multicolor text onto the canvas:

Your browser does not support the <canvas> element.

What is Canvas?

The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).

The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <canvas> element.

Note: Internet Explorer 8 and earlier versions, do not support the <canvas> element.

Create a Canvas

A canvas is a rectangular area on an HTML page, and it is specified with the <canvas> element.

Note: By default, the <canvas> element has no border and no content.

The markup looks like this:

<canvas id="myCanvas" width="200" height="100"></canvas>

Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas.

Tip: You can have multiple <canvas> elements on one HTML page.

To add a border, use the style attribute:

Example

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

Try it yourself »

Draw Onto The Canvas With JavaScript

All drawing on the canvas must be done inside a JavaScript:

Example

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

Try it yourself »

Example explained:

First, find the <canvas> element:

var c=document.getElementById("myCanvas");

Then, call its getContext() method (you must pass the string "2d" to the getContext() method):

var ctx=c.getContext("2d");

The getContext("2d") object is a built-in HTML5 object, with many properties and methods for drawing paths, boxes, circles, text, images, and more.

The next two lines draw a red rectangle:

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

The fillStyle property can be a CSS color, a gradient, or a pattern. The default fillStyle is #000000 (black).

The fillRect(x,y,width,height) method draws a rectangle filled with the current fill style.

Canvas Coordinates

The canvas is a two-dimensional grid.

The upper-left corner of the canvas has coordinate (0,0)

So, the fillRect() method above had the parameters (0,0,150,75).

This means: Start at the upper-left corner (0,0) and draw a 150x75 pixels rectangle.

Coordinates Example

Mouse over the rectangle below to see its x and y coordinates:

X
Y

Canvas - Paths

To draw straight lines on a canvas, we will use the following two methods:

  • moveTo(x,y) defines the starting point of the line
  • lineTo(x,y) defines the ending point of the line

To actually draw the line, we must use one of the "ink" methods, like stroke().

Example

Define a starting point in position (0,0), and an ending point in position (200,100). Then use the stroke() method to actually draw the line:

Your browser does not support the HTML5 canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

Try it yourself »

To draw a circle on a canvas, we will use the following method:

  • arc(x,y,r,start,stop)

To actually draw the circle, we must use one of the "ink" methods, like stroke() or fill().

Example

Create a circle with the arc() method:

Your browser does not support the HTML5 canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

Try it yourself »

Canvas - Text

To draw text on a canvas, the most important property and methods are:

  • font - defines the font properties for text
  • fillText(text,x,y) - Draws "filled" text on the canvas
  • strokeText(text,x,y) - Draws text on the canvas (no fill)

Using fillText():

Example

Write a 30px high filled text on the canvas, using the font "Arial":

Your browser does not support the HTML5 canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

Try it yourself »

Using strokeText():

Example

Write a 30px high text (no fill) on the canvas, using the font "Arial":

Your browser does not support the HTML5 canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

Try it yourself »

Canvas - Gradients

Gradients can be used to fill rectangles, circles, lines, text, etc. Shapes on the canvas are not limited to solid colors.

There are two different types of gradients:

  • createLinearGradient(x,y,x1,y1) - Creates a linear gradient
  • createRadialGradient(x,y,r,x1,y1,r1) - Creates a radial/circular gradient

Once we have a gradient object, we must add two or more color stops.

The addColorStop() method specifies the color stops, and its position along the gradient. Gradient positions can be anywhere between 0 to 1.

To use the gradient, set the fillStyle or strokeStyle property to the gradient, and then draw the shape, like a rectangle, text, or a line.

Using createLinearGradient():

Example

Create a linear gradient. Fill rectangle with the gradient:

Your browser does not support the HTML5 canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

Try it yourself »

Using createRadialGradient():

Example

Create a radial/circular gradient. Fill rectangle with the gradient:

Your browser does not support the HTML5 canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

Try it yourself »

Canvas - Images

To draw an image on a canvas, we will use the following method:

  • drawImage(image,x,y)

Image to use:

The Scream

Example

Draw the image onto the canvas:

Your browser does not support the HTML5 canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

Try it yourself »

HTML Canvas Reference

For a complete reference of all the properties and methods that can be used with the Canvas object (with try-it examples on every property and method), go to our Canvas Reference.

The HTML <canvas> Tag

Tag Description
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)


W3Schools Certification

W3Schools' Online Certification

The perfect solution for professionals who need to balance work, family, and career building.

More than 10 000 certificates already issued!

Get Your Certificate »

The HTML Certificate documents your knowledge of HTML.

The HTML5 Certificate documents your knowledge of advanced HTML5.

The CSS Certificate documents your knowledge of advanced CSS.

The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.

The jQuery Certificate documents your knowledge of jQuery.

The XML Certificate documents your knowledge of XML, XML DOM and XSLT.

The ASP Certificate documents your knowledge of ASP, SQL, and ADO.

The PHP Certificate documents your knowledge of PHP and SQL (MySQL).

Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]