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