Agreeing on the product
C. is the Product Manager and I’m the engineer.
Here it the minimal viable product
Name: social-drawing
– A simple canvas to draw
– A color palette on top with 7 colors
– neon colors palette
– to be able to change color
– be able to move the mouse
– click and move to draw
– need a eraser or white color
– Fill – maybe
– Brush size – maybe
– be able to save
- Bonus
- a friend can join and draw on a shared canvas
- reference:
- http://dev.opera.com/articles/view/html5-canvas-painting/
Getting Started
Using CSS, HTML5, Javascript is the best programming language because they are ubiquitous, easy, lots of tools and sample and best of all it’s interactive
Tools for editing: I chose to use Emacs to edit the files, and C. was ok to learn it. You can use Aqua Emacs, Text Edit, Notepad++ (Windows)
Use the browser for viewing, so Firefox, Safari or Chrome would work
I chose to use git and http://code.google.com/ to host the site and the code
Getting to a working version ASAP so the kids don’t loose attention
We typed this up while riding BART and the indentation is not pretty, but we got a working version up with a few kinks
<html> <title> Social Drawing </title> <canvas id="canvas" width=500 height=350> </canvas> var ctx; function init() { var mouseX; var mouseY; var canvas = document.getElementById("canvas"); if (canvas && canvas.getContext) { ctx = canvas.getContext("2d"); canvas.addEventListener("mousemove", onMouseMove, false); var radial = ctx.createRadialGradient(370, 60, 0, 370, 60, 70); ctx.strokeStyle = 'lime'; ctx.lineWidth = 10; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.beginPath(); ctx.moveTo(10,10) ctx.lineTo(500,10); ctx.lineTo(500, 350); ctx.lineTo(10,350); ctx.lineTo(10,10); ctx.stroke(); ctx.closePath(); } } onload = init; function onMouseMove(e) { mouseX = e.clientX-canvas.offsetLeft; mouseY = e.clientY-canvas.offsetTop; ctx.lineTo(mouseX, mouseY); ctx.stroke(); } </html>
Next Step: Fixing the funky mouse action