MTEC1003 - Canvas

Let’s Draw

Tired of text? We can actually draw with JavaScript using a canvas.

a canvas is an html element that be used for programmatic rendering of graphics on a web page
think of it is a blank rectangle on your page that you can draw on

Setting up a Canvas

again, a canvas is an html element - it’s a tag. You can draw on it by using JavaScript. Here’s how you set it up:

create an html page
tell the page to call your code once the whole page is loaded (right now, we’ll do this by adding an onload attribute to the body tag)
add your canvas tags
add your script tags
create a function that will do your drawing!
write some setup code so that you have access to the canvas

Our Usual Template

Let’s start with our usual template….

<html>
<head>
	<title></title>
</head>
<body>
<script>
</script>
</body>
</html>

Telling Your Page to Draw Something

We’ll have to let the page know that it should start drawing once the entire page is loaded.

we do this by adding an onload event handler to the body tag…
that calls a function called draw()that we’ll define later
note that there are better ways to do this, but we’ll go with this technique for now

<body onload="draw()">

A Canvas

Let’s add a place to draw!. Use a pair of opening and closing tags called canvas… with attributes, id, width, and height.

id will be used later in order to reference this particular canvas
width and height are the dimensions of your drawing area
place this tag before your JavaScript (for now… we’ll see a more correct way of doing it later)
make sure to add an id attribute!

<canvas id="sketch" width="300" height="300">
</canvas>

Script Tags

As usual, add your script tags:

this can be done within the body
you can place it before the closing body tag (after the canvas element)

<script>
</script>

Draw Function

Within your script tags, define the function that you specified in your body tag.

<script>
function draw() {
 // your drawing goes here
}
</script>

Using Your Canvas in JavaScript

In order to draw on your canvas, you have to:

retrieve the canvas element from your page using the id
get the context from your canvas element (which is what we’ll be using to draw)

<script>
var sketch = document.getElementById('sketch');
var context = sketch.getContext("2d");
</script>

All Together Now…

Here’s everything put together.

<html>
<head>
	<title></title>
</head>
<body onload="draw()">
<canvas id="sketch" width="300" height="300">
</canvas>
<script>
function draw() {
	var sketch = document.getElementById('sketch');
	var context = sketch.getContext("2d");
	// draw stuff here!
}
</script>
</body>
</html>

Drawing

About the canvas…

the canvas origin is at 0, 0, and it’s at the upper left hand corner
positive y values go down, positive x values go right

Once you have your context, you can call methods (or functions) from the context by using the dot and the function name:

context.fillRect(30, 30, 50, 50);

A Rectangle

fillRect creates a rectangle. It takes 4 arguments:

x position
y position
width of rectangle
height of rectangle

context.fillRect(x, y, width, height);

A Circle

A circle is a bit more complicated:

context.beginPath();
context.arc(x, y, radius, start angle, end angle, clockwise);
context.closePath();
context.fill();

Circle Example

context.beginPath();
context.arc(30, 10, 10, 0, 2 * Math.PI, true);
context.closePath();
context.fill();

Colors

You can color your shapes by setting fillStyle:

context.fillStyle = "#00ff00"

this sets the fill color for all shapes drawn subsequently
notice that it’s not a function call
rather… you set that property equal to a value
the value is a string representation of a hexadecimal color code
- “#ff0000” - red
- “#00ff00” - green
- “#0000ff” - blue
- “#000000” - black

More About Drawing

Each shape you create draws on top of all of your previous drawwings. In this case, the green circle is drawn over the black square:

context.fillRect(40, 30, 100, 100);

context.fillStyle = "#00ff00"
context.beginPath();
context.arc(50, 40, 40, 0, 2 * Math.PI, true);
context.closePath();
context.fill();

An Example Program:

<body onload="draw()">
<canvas id="sketch" width="300" height="300">
</canvas>
<script>
function draw() {
        var sketch = document.getElementById('sketch');
        var context = sketch.getContext("2d");

        context.fillRect(40, 30, 100, 100);

        context.fillStyle = "#00ff00"
        context.beginPath();
        context.arc(50, 40, 40, 0, 2 * Math.PI, true);
        context.closePath();
        context.fill();
}
</script>
</body>