Canvas Element
Used to draw graphics on a web page
The HTML <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, text, and adding images.
HTML Canvas Can Draw Text
Canvas can draw colourful text, with or without animation.
HTML Canvas Can Draw Graphics
Canvas has great features for graphical data presentation with an imagery of graphs and charts.
HTML Canvas Can Be Animated
Canvas objects can move. Everything is possible: from simple bouncing balls to complex animations.
HTML Canvas Can Be Interactive
Canvas can respond to JavaScript events.
Canvas can respond to any user action (key clicks, mouse clicks, button clicks, finger movement).
The format of the HTML Canvas Element looks like this:
<canvas id="myCanvas" width="200" height="100"></canvas>
An id is necessary for javaScript to be able to refer to it.
The width & height are also necessary to define the size of the canvas.
By defaut the canvas element has no border or content (use the 'style' commands to
set a border if one is required).
Events can be added if required (onclick, onmouseover, onkeypress etc).
w3schools have a web page for a Introduction/Tutorial
and a page showing some
HTML Canvas References.
The below is an example that uses the code described above and also in the pane
to the right.
(although i added a border to the canvas (in black) just so you could see the canvas area)
The ctx.fillStyle & ctx.fillRect is what creates the red rectangle.
Canvas Drawing
-
Find the canvas element using it's id
-
Create a drawing object
-
Draw on the canvas
1.
Find the canvas element by, for example...
var canvasTest = document.getElementById("myCanvas");
2.
Then you need to create a drawing object for the canvas...
var ctx = canvasText.getContext("2d");
"2d" creates a 2-dimensional rendering. Others are avail but don't work
with all browsers (eg webgl, webgl2, bitmaprenderer).
3.
Then you can draw on the canvas...
ctx.fillStyle = "#FF0000";
ctx.fillRect(x, y, width, height);
The fillStyle property
sets or returns the color, gradient, or pattern used to fill the drawing.
The fillRect method
draws a "filled" rectangle. The default color of the fill is black.
x = the coordinate of the upper-left hand corner of the rectangle (in relation
to the canvas), 0 = at the corner, 10 moves it 10px to the right.
y = the coordinate of the upper-left hand corner of the rectangle (in relation
to the canvas), 0 = at the corner, 10 moves it 10px down.
width = the width of the rectangle, 100 = 100px wide.
height = the height of the rectangle, 100 = 100px high.