CSC 195 2014S, Class 08: Drawing with a Canvas
==============================================

_Overview_

* Preliminaries.
    * Admin.
    * Questions.
* Look at games.
* A quick canvas example.
* W3C canvas tutorial.
* Explore!

Preliminaries
-------------

### Admin

* We'll look at some of the things you built.
* Next homework: Do something interesting with HTML canvas.

### Questions

Look at games
-------------

A quick canvas example
----------------------

* Sam failed.
* Canvas is given by a canvas element in the document.

    <canvas id="example">
    ALT TEXT
    </canvas>

    var canvas = document.getElementById("example");
    var ctx = canvas.getContext('2d');

Once you have a context

* Draw rectrangles `ctx.fillRect(left,top,width,height)`
* Draw lines `ctx.moveTo(x,y); ctx.lineTo(xprime,yprime)`
* Draw arcs ...

Sam's example: Dragging a box

* To get animation, need to clear the background before we draw the thing
* We clear the background by drawing a big white rectangle
* Need to get the X and Y coordinates of the mouse
    * The onmousedown handler takes an event as a parameter
    * event.x gives x coordinate
    * event.y gives y coordinate
* If we're dragging around the screen, we need another handler
    * onmousemove (in some cases onmousedrag)

W3C canvas tutorial
-------------------

* Learn how to draw on the canvas

Explore!
--------

* Draw something pretty
* Play with interactivity