This demo is based on Bret Victor's Inventing on Principle talk as presented at the CUSEC 2012 conference.

This has been implemented using a canvas widget, the Ajax.org Clould9 Editor and some jQuery UI elements. It's still a work in progress.

You can pretty much just edit the JS code in the editor and your changes will take effect in the canvas on the left immediately. You can also adjust numeric values by placing your cursor by the value and pressing Option and clicking on the value (or Alt-Click on Windows... untested). I've also implemented adjustment for the color values using the "#nnnnnn" format.

TODO

 * I did this using a jQuery slider instead... but I think the UI could still be improved. integrate with Tangle but I don't think Tangle does color selection... so I should probably look for a color selection widget
 * I did this using ColorPicker instead... I need to decide what to do about alpha. maybe a tool like JSColor could be leveraged for color selection
 * code completion thread DoctorJS or switch to another editor component entirely such as CodeMirror
 * code to display highlight...
   * this is probably the most complicated part... I'm not sure how this would work... essentially you need to somehow get linkages between the drawn elements back to their code... but how on earth would that work?
var canvas = document.getElementById('tutorial'); var ctx = null; if (canvas.getContext){ ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); } //console.log(editor); // "string1" "string2" 234,-23 "rgb(200,0,0)" "rgba(200,0,0,1)" var methods = { "fillCircle": function(x,y,radius) { this.beginPath(); this.arc(x+radius,y+radius,radius,0,Math.PI*2,true); this.closePath(); this.fill(); } }; function addMethods(object,methods) { for (var name in methods) { object[name] = methods[name]; } } addMethods(ctx, methods); draw(); function draw() { ctx.fillStyle = "#cc0000"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "#0000cc"; ctx.fillRect (30, 30, 55, 50); ctx.fillStyle = "#00cc00"; ctx.fillCircle(50,50,22); ctx.fillStyle = "#00cccc"; ctx.fillCircle(70,70,25); ctx.font = "20pt Helvetica"; ctx.fillStyle = "#000000"; ctx.fillText("testing111",100,100); }