Checklist! ... to succeed at this project, you need to know how to ...
Basic HTML/CSS:
post files to gibson (IGME-230)
create a structured web page using HTML elements (IGME-230)
apply CSS style rules to a page using type, class, and id selectors (IGME-230)
embed a web font (IGME-230)
utilize CSS absolute positioning to stack <canvas> elements on top of one another (IGME-230 and see Canvas Paint App ICE)
Basic JS:
declare local and global JS variables, and write JS functions
programmatically select one or more HTML elements on a page
modify the attributes and textual contents of an HTML element
create HTML widgets such as buttons, radio buttons, check boxes and sliders so that the user can modify the behavior of an application by manipulating the widgets (Canvas Paint App ICE)
attach event handlers/event listeners to HTML widgets (Canvas Paint App ICE)
capture mouse input and position and translate it to canvas coordinates (Canvas Paint App ICE)
utilize console.log(), break;, and the Web Inspector debugger breakpoints to troubleshoot your code
get a reference to a CanvasRenderingContext2D instance (Week 1)
draw styled text on the canvas, and apply shadow effects (Hello Canvas ICE)
manipulate the drawing state stack with ctx.save() and ctx.restore() (Hello Canvas ICE)
fill and stroke squares/rectangles using the convenience methods ctx.fillRect() and ctx.strokeRect() (Hello Canvas ICE)
fill and stroke squares/rectangles using ctx.beginPath(), ctx.rect(), ctx.closePath(), ctx.fill() and ctx.stroke()
fill and stroke circles/ovals using ctx.beginPath(), ctx.arc(), ctx.closePath(), ctx.stroke(), and ctx.fill() (SG-1)
stroke straight paths to create lines and polygons using ctx.moveTo(), ctx.beginPath(), ctx.lineTo(), ctx.closePath() and ctx.stroke()(SG-1)
stroke curved paths to create arbitrary shapes using ctx.quadraticCurveTo() and ctx.bezierCurveTo() (SG-2)
clear the canvas
manipulate attributes of the drawing state such as strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign and textBaseline
Web Audio:
work with frequency and waveform data
create and connect audio nodes
More JS:
move an object on the canvas using sprite animation