MTEC1003 - Drawing Revisited, Events

Let’s Draw

What HTML element do we use to draw on a web page?

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. How do we set it up? →

create an html page
add your canvas tags
add your script tags
tell the page to call your code once the whole page is loaded
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>

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="800" height="600">
</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>

Events

We can have JavaScript run whenever a specific even happens. We’ll use document.addEventListener to monitor for events.

it takes two parameters…
an event (as a string)
the name of a function that should run when the event is triggered:

document.addEventListener('DOMContentLoaded', main);

Events Continued

document.addEventListener('DOMContentLoaded', main);

the above runs a function called main when the page is loaded.
we’ll use this to start our drawing…

Define our Drawing Function

function main() {
	// draw stuff here
}

Get the Canvas Element and Context

// within your main function
var sketch = document.getElementById('sketch');
var context = sketch.getContext("2d");

A Template (Somewhat Updated)

<html>
<head>
    <title></title>
</head>
<body>
<canvas id="sketch" width="800" height="600">
</canvas>
<script>
document.addEventListener('DOMContentLoaded', main);

function main() {
	var sketch = document.getElementById('sketch');
	var context = sketch.getContext("2d");
	// your code goes 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();

A Circle Function

First… it’s tough to make a circle. Lets try making a few functions to reduce our code. →

document.addEventListener('DOMContentLoaded', main);

function main() {
	var sketch = document.getElementById('sketch');
	var context = sketch.getContext("2d");
	draw_circle(context, 300, 300, 100);
}

function draw_circle(context, x, y, r) {
	context.beginPath();
	context.arc(x, y, r, 0, 2 * Math.PI, true);
	context.closePath();
	context.fill();
}

A Crescent

document.addEventListener('DOMContentLoaded', main);

function main() {
	var sketch = document.getElementById('sketch');
	var context = sketch.getContext("2d");
	draw_moon(context, 300, 300, 100);
}

function draw_circle(context, x, y, r) {
	context.beginPath();
	context.arc(x, y, r, 0, 2 * Math.PI, true);
	context.closePath();
	context.fill();
}

function draw_moon(context, x, y, r) {
	draw_circle(context, x, y, r)
	context.fillStyle =	"#ffffff";
	draw_circle(context, x + 50, y + 50, r)
}

The Full Program (Part #1)

<html>
<head>
    <title></title>
</head>
<body>
<canvas id="sketch" width="800" height="600">
</canvas>
<script>
document.addEventListener('DOMContentLoaded', main);

function main() {
	var sketch = document.getElementById('sketch');
	var context = sketch.getContext("2d");
	draw_moon(context, 300, 300, 100);
}

function draw_circle(context, x, y, r) {
	context.beginPath();
	context.arc(x, y, r, 0, 2 * Math.PI, true);
	context.closePath();
	context.fill();

The Full Program (Part #2)


}

function draw_moon(context, x, y, r) {
	draw_circle(context, x, y, r)
	context.fillStyle =	"#ffffff";
	draw_circle(context, x + 50, y + 50, r)
}

</script>
</body>
</html>

Drawing Revisited, Events