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:
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.
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.
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:
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:
First, find the <canvas> element:
Then, call its getContext() method (you must pass the string "2d" to the getContext() method):
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:
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.
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.
Mouse over the rectangle below to see its x and y coordinates:
To draw straight lines on a canvas, we will use the following two methods:
To actually draw the line, we must use one of the "ink" methods, like stroke().
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:
To draw a circle on a canvas, we will use the following method:
To actually draw the circle, we must use one of the "ink" methods, like stroke() or fill().
Create a circle with the arc() method:
To draw text on a canvas, the most important property and methods are:
Write a 30px high filled text on the canvas, using the font "Arial":
Write a 30px high text (no fill) on the canvas, using the font "Arial":
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:
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.
Create a linear gradient. Fill rectangle with the gradient:
Create a radial/circular gradient. Fill rectangle with the gradient:
To draw an image on a canvas, we will use the following method:
Draw the image onto the canvas:
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.
Your message has been sent to W3Schools.