Protótipo de um Editor de Canvas HTML5

O objetivo é criar um prompt que executa as ações com a entrada do comando em um campo de texto (<input>).
Cada comando digitado no prompt executará sua respectiva função associada ao mesmo.
O protótipo será implementado por etapas.
Referência:
http://www.java2s.com/Tutorial/JavaScript/0300__Event/Createyourownevent.htm
JavaScript Tutorial>Event>Custom Event

Etapa 1

Será criado um campo (<input>) para entrada do raio do círculo e um botão para execução da ação. Na etapa 2 será criado um prompt conforme o objetivo traçado acima.

Página
A página abaixo possui um arquivo externo javascript, file1.js, uma canvas, um input com id="id1" e um botão com onClick="func1()". A página pode ser feita em um editor de texto com um nome válido (arquivo.html).
arquivo.html
<!DOCTYPE html>
<html lang="pt_BR">
<head>
<meta charset="utf-8">
<title>Canvas com HTML5</title>
<style>
</style>
<script src="file1.js"></script>
</head>
<body>
<canvas id="c" width="500" height="375"></canvas>
<br>
Raio:<input id="id1" size="" 10="" maxlength="10" autocomplete="off" type="text">
<botton style="border: 1px solid black;" onclick="app.func1()">Clique aqui!</botton>
</body>
</html>

Arquivo externo javascript, file1.js
O arquivo externo file1.js pode ser feito em um editor de texto com extenção .js.
var app = {};
app.func1=(function () {

var canvas = document.getElementById("c");
  var ctx = canvas.getContext("2d");
    var step = 2*Math.PI/20; 
    var h = 150;
    var k = 150;
    var r = parseFloat(document.getElementById("id1").value);
    ctx.beginPath(); 
    for(var theta=0;  theta < 2*Math.PI;  theta+=step)
     { var x = h + r*Math.cos(theta);
       var y = k - r*Math.sin(theta);  
       ctx.lineTo(x,y);
     }
    ctx.closePath();    
    ctx.stroke();
});

Obs:
parseFloat(document.getElementById("id1").value) pega o valor do input com id="id1" e converte para número.
Teste


Raio: Clique aqui!


Etapa 2

Será implementado na página anterior (arquivo.html) um código javascript e um campo input para entrada do comando que executará o arquivo file1.js. O botão executará o javascript implementado.

<HTML>
<HEAD>
<TITLE>HTML-CAD</TITLE>
<script src="file1.js"></script>
<SCRIPT>
function HtmlCAD(text2) {
   this.text2 = text2;
   if (this.text2 == "circle") {
       app.func2();
    }
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<canvas id="c2" width="500" height="375"></canvas><br>
Raio:<input id="id2" size="" 10="" maxlength="10" autocomplete="off" type="text">
Enter command:<input type=text id="txt">
<input type=button value="Do It!" onClick="HtmlCAD(document.getElementById('txt').value);">
</FORM>
</BODY>
</HTML>
Obs: o botão com name="txt" e onClick="HtmlCAD(txt.value) não funcionou no GoogleChrome.


Arquivo externo javascript, file1.js
Acrescente no arquivo externo file1.js a nova função func2() semelhante a função func1().
var app = {};
app.func1=(function () {

var canvas = document.getElementById("c");
  var ctx = canvas.getContext("2d");
    var step = 2*Math.PI/20;
    var h = 150;
    var k = 150;
    var r = parseFloat(document.getElementById("id1").value);
    ctx.beginPath(); 
    for(var theta=0;  theta < 2*Math.PI;  theta+=step)
     { var x = h + r*Math.cos(theta);
       var y = k - r*Math.sin(theta);   
       ctx.lineTo(x,y);
     }

    ctx.closePath();    
    ctx.stroke();
});
app.func2=(function () {

var canvas = document.getElementById("c2");
  var ctx = canvas.getContext("2d");
    var step = 2*Math.PI/20; 
    var h = 150;
    var k = 150;
    var r = parseFloat(document.getElementById("id2").value);
    ctx.beginPath(); 
    for(var theta=0;  theta < 2*Math.PI;  theta+=step)
     { var x = h + r*Math.cos(theta);
       var y = k - r*Math.sin(theta);  
       ctx.lineTo(x,y);
     }
    ctx.closePath();    
    ctx.stroke();
});



Teste:

Raio: Enter command:
Entre com o raio e o comando circle e click no botão!

A referência utiliza o conceito de objeto em JavaScript:
<HTML>
<HEAD>
<TITLE>HTML-CAD</TITLE>
<script src="file1.js"></script>
<SCRIPT>

function HtmlCAD(text1) {
   this.text1 = text1;
}

function on_Same () {
   func1();
}

function check_Same() {
   if (this.text1 == "circle") {
       this.onSame();
   }
}

HtmlCAD.prototype.checkSame = check_Same;
HtmlCAD.prototype.onSame = on_Same;

function createHtmlCAD(text1) {
   var x = new HtmlCAD(text1);
   x.checkSame();
}

</SCRIPT>
</HEAD>
<BODY>
<FORM>
<canvas id="c" width="500" height="375"></canvas>
Raio:<input id="id1" size="" 10="" maxlength="10" autocomplete="off" type="text">
Enter first text:<input type=text name="txtFirst">
<input type=button value="Do It!" onClick="createHtmlCAD(txtFirst.value);">
</FORM>
</BODY>
</HTML>

Obs:
Cada elemento HTML dentro de uma página deve ter o seu id e o seu nome diferentes para que possam ser identificados. Caso os exemplos anteriores fossem feitos em páginas separadas não seria necessário tal diferenciação.
Novas implementações:
- Execução do comando com a tecla ENTER;
- Uso do mouse para desenho;
- Etc...