Hi everyone! Last week’s lesson was on drawing on the HTML5 Canvas. This will be very valuable as we head on in future lessons.
The Canvas was something that’s new in HTML5. When HTML5 was designed, the web had grown to be something more than just text and pictures – video, animation and applications are now all over the web, and the HTML5 standard wanted to address things like these. Enter the canvas element, something to allow you to draw and animate directly in an HTML page, as opposed to having to do it in something like Flash or Java.
In order to set up a canvas, you’ll need to put a canvas element in your HTML page, like this:
<canvas id="myCanvas" width=600 height=400></canvas>
This will display a canvas, but you won’t be able to see it, so you want to add css to the page like this:
#myCanvas {
border-style: solid;
border-width: 1px;
}
Which will give you neat little 1 pixel border around the edge so you can see it.
To draw the elements, you’ll have to add a bit of setup code before you draw:
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
These two lines set up your canvas context, which is where the commands to draw shapes on the canvas reside.
Then you can begin to draw:
context.beginPath();
context.moveTo(50, 50);
context.lineTo(100, 100);
context.stroke();
Unlike in Scratch, which uses relative coordinates (you move forward and you turn), HTML5 canvas uses absolute coordinates. There’s a bunch of things going on here:
context.beginPath(); starts the drawing process. It’s kind of like pen down in Scratch but not 100%; you still need to confirm the line by using context.stroke(); context.moveTo moves your pen to the coordinates (50, 50) and context.lineTo then draws a line from your current point to (100, 100). Try varying each of the coordinates and seeing what effects you get.
To draw a custom shape, you do something similar to this:
context.beginPath();
context.moveTo(50, 50);
context.lineTo(100, 100);
context.lineTo(100, 50);
context.lineTo(50, 50);
context.closePath();
context.fillStyle = 'red';
context.fill();
context.lineWidth = 2;
context.strokeStyle = 'green';
context.stroke();
context.closePath() closes the loop for the shape, allowing you to fill it in. context.fill(); actually fills your shape, and fillStyle allows you to specify the color. Likewise, lineWidth and strokeStyle allow you to specify the line properties.
Lastly, you can construct rectangles and circles:
context.beginPath();
context.rect(200, 50, 100, 100);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 2;
context.strokeStyle = 'orange';
context.stroke();
context.rect() allows you to draw a rectangle; the first two numbers specify the x and y coordinates of the upper left corner, and the last two specify the width and height.
context.beginPath();
context.arc(400, 300, 50, 0, 2 * Math.PI, false);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 2;
context.strokeStyle = 'orange';
context.stroke();
context.arc() allows you to draw a circle (or any part of it), by specifying the center (first two numbers), the radius, the beginning and end angle (for a circle, just use 0 and 2 * Math.PI; if you want to understand further, the angles are in radians) and whether the arc goes clockwise or counterclockwise (irrelevant for a circle).
Here are last week’s extra materials to look over:
- Khan Academy’s Drawing Basics lesson (Khan Academy uses processing.js):
https://www.khanacademy.org/computing/computer-programming/programming/drawing-basics/p/intro-to-drawing - HTML5 Canvas Tutorials:
http://www.html5canvastutorials.com/ - Code Monster’s lessons 2-6 (Parameters and Drawing to Color and Transparency)
http://www.crunchzilla.com/code-monster
And last week’s assignment: http://jsfiddle.net/zeroth_hour/ocsgwrk6/