HTML5, released in 2012, resulted in major modifications to the capabilities available to web developers. One of the big additions was the
canvas element. The canvas element allows developers to put a drawing canvas in the middle of their page. While the canvas element is written in HTML, we need JavaScript to draw on it. JavaScript is a client side programming language used in web design. Here is some sample code that draws a blue rectangle on a page:
...
<body>
...
<canvas id='blueSquarePic' width='300px' height='200px'></canvas>
<script>
var canvas=document.getElementById('blueSquarePic');
var context=canvas.getContext('2d');
context.rect(100,75,50,25);
context.strokeStyle='blue';
context.stroke();
</script>
...
</body>
...
Here is each line of this code in more detail:
<canvas id='blueSquarePic' width='300px' height='200px'></canvas>
The canvas element allows web programmers to draw on the screen. It requires a closing and opening tag AND the use of three attributes:
- id - a unique identifier on the page
- width - an integer value in pixels
- height - an integer value in pixels
If desired, a border(frame) can be applied to the canvas using the style attribute with the following value: 'border:3px solid red'. In this property/value pair, the 3px is the width of the border, the solid is the style and red will be the color of the border.
<script>...</script>
The script tags are used to tell the browser that the code between them is JavaScript code. All code inside these tags must be JavaScript and all JavaScript code must occur within script tags. It is important when drawing that the script tags are placed
after the canvas tag. This is because the canvas needs to be loaded by the browser before the JavaScript can write to it.
var canvas=document.getElementById('blueSquarePic');
This line of code 'gets' the canvas element and gives the JavaScript code access to it.
var context=canvas.getContext('2d');
The getContext method, called from the canvas variable prepares the canvas for drawing. All drawing commands are called from the context. One way to think of it is that the canvas is the frame and the context is the actual area for painting.
context.rect(100,75,50,25);
The rect method is designed to create a rectangle. The rect method takes four parameters. They are (in order): x coordinate of upper left corner, y coordinate of upper left corner, width, height. It is important to note that in computer graphics, the origin (0,0) is typically located in the upper left corner of the screen. The x values increase as we proceed right and the y values increase as we proceed down. See the shapes section below for more information.
context.strokeStyle('blue');
Setting the strokeStyle sets the color of the outline of the shape. The color parameter can be set to any of the web safe colors. These colors include: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. For more information on setting colors and stroke, see the drawing section below.
context.stroke();
This is the line of code that actually draws the rectangle on the canvas. The shape and color have been set prior to the drawing, so those are the settings that the stroke method uses. The stroke command draws only the outline of the shape. To fill the shape, we would call the fill() command. For more information about stroke vs fill, see the drawing section below.
Shapes
There are a variety of shapes that can be created in the context of a canvas. The following is a list of the shapes and the methods/parameters used to create them. Remember, createing the shape does not make it appear. You must follow the creation with a fill() or stroke() command. See the drawing section below for more information.
Rectangles:
A rectangle is created using the .rect() method. The .rect() method takes four parameters. The first two are the (x,y) coordinate of the upper left corner of the rectangle. The last two indicate the width and height, respectively, of the rectangle - stretching right and down from the upper left corner. To draw a square, make the width and height values equal.
context.rect(50,25, 10, 20);
creates a rectangle whose upper left corner is at (50, 25) and from there extends left 10px and down 20px.
Circles:
A circle is created using the .arc() method. The .arc() method takes six parameters. The first two are the (x,y) coordinate of the center of the circle. The third is the radius of the circle (in pixels). The fourth and fifth are the start and end measures of the arc. In other words, you can draw all of a circle, or part of a circle. The start and end measures are written in radians. A radian, similar to degrees, is a way to measure a central angle of a circle. Radians are based on the circumference of a unit circle. Thus, a full circle has a radian measusure of 2π. The value of 0 is the right most point of the circle. Finally, the last parameter, which is optional, is a true/false value that defines if the arc is drawn in the counterclockwise direction. Unless needed for the image, you should choose true to keep consistency with the unit circle we learn in mathematics.
contect.arc(10, 15, 5, 0, Math.PI, true);
creates a half circle with center at (10, 15) and radius=5 drawn in the counterclockwise direction from due east to due west (the top of the circle).
Lines:
A line is created using the .moveTo() and .lineTo() methods. Both of these methods move the pencil to a given point on the canvas. The difference is that .moveTo() moves to a point without drawing, while lineTo() moves to a point and leaves a line between its starting and ending point. Both methods take two parameters, the (x,y) of the point that they are moving to (their end point).
context.moveTo(10,20); context.lineTo(40,40);
creates a line that goes from the point (10,20) to (40,40).
Polygons:
A polygon can be created by using a sequence of subsequent .lineTo() methods. These methods will enclose a space with straight line, thus creating a polygon. There is no need to draw a line back to the starting point as this will happen automatically.
context.lineTo(0,0); context.moveTo(0,30); context.moveTo(40,0);
creates a triangle between the points (0,0), (0,30) and (40,0).
Drawing
Stroke vs. Fill
Once a shape has been created using the above code, it needs to be drawn to the canvas. There are two choices when drawing on the canvas: .stroke() and .fill(). The .stroke() command draws only the outline of the shape while the .fill() command fills the interior of the shape. It is possible to call both methods which, with a color change, will produce an outline around the filled in shape.
Text
Text can also be drawn on the screen. To draw text, there are two options: strokeText() and fillText(). The strokeText() method draws the outline of the text on the canvas, while fillText() draws solid text on the canvas. Both of these methods take three parameters: the string to be output, the x coordinate of the upper left, and the y coordinate of the upper left.
context.fillText("This is text", 100, 20);draws the string "This is text" on the screen with the upper left corner at x=100, y=20. The text is solid.
Properties
There are a variety of properties that can be changed before objects are drawn to the canvas. These properties will allow the programmer to change the color, font and line width. They are as follows:
context.lineWidth=10;
changes the current stroke width to 10 pixels
context.fillStyle='blue';
changes the current fill color to blue
context.strokeStyle='green';
changes the current line color to green
context.font="24pt Verdana";
changes the current font to size 24 in Verdana. (Options:Georgia|Times New Roman|Arial|Verdana|Courier New)