Drawing Project Guide

Day 1

Morning Session

1. If you haven't already done so, install Node.js and yarn (npm install --global yarn).
2. Download the starter code. After unzipping, run yarn to install dependencies.
3. Create an HTML, CSS, and TypeScript (src/index.ts) file. Connect these files together so that a console.log displays in the JavaScript console. Run yarn dev to compile your TypeScript and start a local server.
4. In your HTML, add a canvas element. Then, write a TypeScript function to return that element.
5. Add radio buttons for the different tools: rectangle, circle, and pencil. Write a function to read the currently selected tool from the DOM.
6. Add 2 input elements of type color: one for stroke color and one for fill color. For both input elements, whenever the input value changes, store the updated value in a TypeScript variable. (It's fine if you don't finish, these aren't essential)

Afternoon Session

1. Define types for Point and Rect.
2. Define a Shape interface. Define RectangleShape, EllipseShape, and PolylineShape — you can choose whether to use type, interface, or class for these, but they should all conform to Shape.
3. Hardcode an example rectangle, ellipse, and polyline in a new array of Shape.
4. Write a Drawing class. This class should have a draw method or property that draws an array of shapes onto the canvas. Start by drawing the hardcoded array.

Day 2

Morning Session

1. Download the zip from slack 🙈

Afternoon Session

1. Implement the ellipse tool
2. Implement the pencil tool. Consider using an array of Point objects to store the line as it's drawn. Use a the canvas methods beginPath, moveTo, and lineTo.
3. Handle touch events in addition to mouse events. There are analogous touch events for all the mouse events we use: touchstart, touchmove, touchend.

   You can access touch coordinates using, e.g.: event.changedTouches[0].clientX
   
   See also: https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

4. Cancel the drag if the user releases the mouse outside the canvas element. Consider adding a mouseup event listener on document to do this.

Resources