Wednesday, September 26, 2012

Canvas Drawing @ Khan Academy

Khan Academy is now teaching web programming with interactive web drawing tools...

Computer Science | Khan Academy


Here is the program, a snippet of JavaScript for drawing on canvas

// Winston's handsome features don't need outlines
noStroke();

// face
fill(255, 255, 0);
ellipse(202, 208, 300, 300);

// eyes
fill(46, 46, 41);
ellipse(157, 151, 40, 40);
ellipse(304, 142, 40, 40);

// mouth
fill(252, 65, 65);
ellipse(257, 240, 120, 136);


They are not the only one with interactive canvas tool.
w3schools.com also has similar, but much less "fun" tool:

Your browser does not support the HTML5 canvas tag.

this is the script that does the job:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

No comments: