/

HTML / CSS / JavaScript Tutorial

HTML Element: <canvas>

[this page | pdf | back links]

The HTML <canvas> element is used to draw graphics via scripting (usually via JavaScript). It is new in HTML 5. Such an element isn’t directly endowed with its own drawing abilities. Instead it is necessary to apply the getContext() method to the corresponding DOM object to return another object that does have drawing abilities.

 

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

 

Attribute

Description

More

height

Height of element

Here

width

Width of element

Here

 

To create or access such an element in JavaScript see here. The corresponding HTML DOM object supports standard DOM properties and methods, as well as the following additional methods:

 

Method

Description

More

getContext()

Returns an object that can be used to elaborate (populate) the canvas

Here

restore()

Returns previously saved path state and attributes

Here

save()

Saves path state and attributes

Here

 

Older versions of getContext focus on getContext("2d") which allows drawing of many types of two-dimensional material (e.g. text, lines, boxes, circles etc.). Newer versions support drawing of hardware-supported three-dimensional objects via getContext("WebGL") or getContext("WebGL2").

 

The object returned by the getContext("2d") method provides the following properties and methods:

 

Additional getContext(“2d”) properties:

 

Property

Description

More

Styles etc.

 

 

fillStyle

Sets / returns style (colour, gradient, pattern etc.) used to fill element

Here

strokeStyle

Sets / returns style used for strokes

Here

shadowBlur

Sets / returns shadow blur level, see CSS text-shadow property

Here

shadowColor

Sets / returns shadow colour, see CSS text-shadow property

Here

shadowOffsetX

Sets / returns shadow horizontal offset, see CSS text-shadow property

Here

shadowOffsetY

Sets / returns shadow vertical offset, see CSS text-shadow property

Here

Line styles

 

 

lineCap

Sets / returns style used for line ends

Here

lineJoin

Sets / returns type of corner between two lines where they join

Here

lineWidth

Sets / returns line width

Here

miterLimit

Sets / returns maximum mitre limit

Here

Text

 

 

font

Sets / returns CSS font property for current text

Here

textAlign

Sets / returns CSS text-align property for current text

Here

textBaseline

Sets / returns text baseline for current text

Here

Sizing and manipulation of individual pixels

 

 

data

Returns object containing image data for specific ImageData object

Here

height

Returns height of an ImageData object

Here

width

Returns width of an ImageData object

Here

Other

 

 

globalAlpha

Sets / returns current alpha, i.e. transparency value, of drawing

Here

globalCompositeOperation

Sets / returns how new images are drawn onto existing images

Here

 

Additional getContext(“2d”) methods:

 

Method

Description

More

Styles etc.

 

 

addColorStop()

Specifies colours and stop positions for a gradient object

Here

createLinearGradient()

Creates a linear gradient

Here

createPattern()

Repeats a specific element in a specific direction

Here

createRadialGradient()

Creates a radial (i.e. circular) gradient

Here

Rectangles

 

 

clearRect()

Clears specified pixels within a rectangle

Here

fillRect()

Draws a ‘filled’ rectangle

Here

rect()

Creates a rectangle

Here

strokeRect()

Draws a rectangle that is not ‘filled’

Here

Paths

 

 

arc()

Creates a circular arc

Here

arcTo()

Creates a circular arc between two tangents

Here

beginPath()

Begins / resets a path

Here

bezierCurveTo()

Creates cubic Bézier curve

Here

clip()

Clips region from canvas

Here

closePath()

Completes path back to its original starting point

Here

fill()

Fills current path

Here

isPointInPath()

Returns true if point is in current path, otherwise false

Here

lineTo()

Moves path to a specified point in the canvas, creating a line from the previous point

Here

moveTo()

Moves path to a specified point in the canvas without creating a line

Here

quadraticCurveTo()

Creates quadratic Bézier curve

Here

stroke()

Draws path in the canvas

Here

Transformations

 

 

rotate()

Rotates current drawing

Here

scale()

Scales current drawing

Here

setTransform()

Defines a transform matrix and then applies transform() method

Here

transform()

Applies a transformation to current drawing

Here

translate()

Applies a translation to current drawing (i.e. adjusts the position of its origin)

Here

Text

 

 

fillText()

Draws ‘filled’ text

Here

measureText()

Returns object indicating width of specified text

Here

strokeText()

Draws text that is not ‘filled’

Here

Drawing images

 

 

drawImage()

Draws an image, canvas or video onto canvas

Here

Sizing and manipulation of individual pixels

 

 

createImageData()

Creates a new blank ImageData object

Here

getImageData()

Returns ImageData object characterised by pixel data for specific rectangle in canvas

Here

putImageData()

Puts image data included in an ImageData object onto canvas

Here

 

The objects returned by the getContext("WebGL") and the getContext("WebGL2") methods provide equivalent 3D and other more sophisticated graphical capabilities. They are not currently explored further in these pages.

 

The default style applicable to this element is shown here.

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head></head>
<body>
Created using HTML (but filled in using JavaScript):<br>
<canvas id="HTMLcanvas" width="200" height="100" style="border: 1px solid black">
Browser does not support HTML 5 canvas elements</canvas>

<br><br>Created (and filled in) using JavaScript:<br>
<span id="element"></span>

<script>
var x1 = document.getElementById("HTMLcanvas");
var c1 = x1.getContext("2d");
c1.fillStyle = "blue";
c1.fillRect(10, 10, 180, 80);

var x2 = document.createElement("CANVAS");
x2.setAttribute("width","200");
x2.setAttribute("height","100");
x2.setAttribute("style","border: 1px solid black");
var c2 = x2.getContext("2d");
c2.fillStyle = "blue";
c2.fillRect(10, 10, 180, 80);
document.getElementById("element").appendChild(x2);
</script>

</body>
</html>


NAVIGATION LINKS
Contents | Prev | Next | HTML Elements


Desktop view | Switch to Mobile