You mention Khan academy, which seems to a be a neat resource providing examples using a wrapper around the processing.js library. To quickly be able to draw examples and stuff using this library I would suggest using jsFiddle, which both allows for drawing and testing of algorithms, and sharing of code and/or drawing with other people.
The following two main sections are one displaying a basic setup of jsFiddle for usage with processing.js, and one with some different resources which you might find helpful.
Setup of basic processing.js fiddle
In the four subsections below I provide the setup for this basic example of a jsfiddle providing access to the commands from Khan Academy, which you can fork into other examples.
For starters change the draw function to your liking, and hit the
run button in the toolbar to see your changes.
Frameworks & Extensions
Select "Processing.js 1.0.0" or other suitable version, and in the next dropdown select "No wrap in <body>"
Html (upper left box)
<canvas width="400px" height="400px"></canvas>
Css (upper right box)
Notice the trick to end the style section using
var scripts = document.body.getElementsByTagName('script');
var canvases = document.body.getElementsByTagName('canvas');
// Setup the Processing Canvas
size( 400, 400 );
// Main draw loop
rect(10, 20, 100, 150);
rect(90, 140, 30, 30);
ellipse(130, 130, 100, 200);
ellipse(130, 130, 110, 110);
line(0, 200, 100, 0);
Some other resources
Whilst looking for alternatives for you question, I found some resources which I'll recommend for further reading:
- Running Khan Academy programs on your computer – Quote: I've noticed a lot of people asking how they can run the programs they've seen or created on Khan Academy's computer science area, so I've written this post to explain how to (sort of) achieve it. Note that not all Khan Academy programs will run on your computer
- jsFiddle Documentation – A work in progress, but there does exist a tutorial, a FAQ and some usage examples
- A jsFiddle clock using processing.js – Displaying animation using processing.js