Blocklyを使ってCanvasに絵を描いてみよう

動機＆目的

プログラミング道場向けの教材作成

JSを使ったお絵かきができるようにしたい。
ただし対象が小学生から中学生と幅があり
キーボードが打てるとは限らない
またアルファベットが読めないかもしれない

目標
以下のようなJSを生成して実行できるようななるところまでサポートする。

var game = document.getElementById("game");
var ctx = game.getContext("2d");
ctx.fillStyle = "lightblue";
ctx.fillRect(0,0,800,600);
ctx.fillStyle = "green";
ctx.fillRect(0,500,800,100);
ctx.strokeStyle = "brown";
ctx.beginPath();
ctx.lineWidth = 10;
ctx.moveTo(200,500);
ctx.lineTo(200,400);
ctx.stroke();
ctx.lineWidth = 5;
ctx.lineTo(150,350);
ctx.moveTo(200,400);
ctx.lineTo(220,380);
ctx.stroke();

カスタムブロックを作る・・

云々

ブロックに対応したコードを組み込む

実行すると
documentがわかりませんと言われる・・・？？？

ゴール（以下のようなものを作りたい）
http://blockly-shapes.appspot.com/static/apps/shape/index.html

データソース
sed
AWK
Python リクルートのAPIを叩くとこまで

参考になりそうなもの
javascript - Blockly on Node.js - Stack Overflow
Google 製 Visual Programming Editor「Blockly」の調査 - 高尾宏治日記 on はてなブログ