Social Drawing HTML5 Canvas Part 1/5

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s