Social Drawing HTML5 Canvas Part 1/5

Posted on by Tony Tam

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

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

First version: http://code.google.com/p/teaching-kids-programming/source/browse/social-drawing/drawing.html?spec=svn99358fbb1e304cf67aedf977029fe80acfc6128d&r=99358fbb1e304cf67aedf977029fe80acfc6128d

We typed this up while riding BART and the indentation is not pretty, but we got a working version up with a few kinks

See the demo of version 0.1

See the final version

<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