<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script type="application/javascript">

//javascript procedure to translate basic commnads
//read string line by line into
//for each line split on spaces

//Globals

const lavender = 'rgb(225, 150, 250)';
const darkGreen = 'rgb(50, 90, 50)';
const aquamarine = 'rgb(50, 175, 225)';
const lightBlue = 'rgb(100, 175, 255)';
const brown = 'rgb(125, 75, 50)';
const greenish = 'rgb(100, 255, 200)';
var can = null;

function setup() {
var c = document.getElementById("myCanvas");
can = c.getContext("2d");

can.fillStyle = 'black'; //canvas drawing and fill color
//can.moveTo(0, 0);
//can.lineTo(200, 100);
//can.stroke();
}

function parse() {
var code = document.getElementById("code").value.split('\n');

for (var i = 0; i < code.length; i++) { //for each line from the text area
var array = code[i].split(" "); //split on spaces
if (array[1].match(/color/i)) {
can.fillStyle = setcan(array[3]); //can.fillStyle number will be after the equal sign
}
else if (array[1].match(/vlin/i)) {
var vargs = array[2].split(",");
vlin(vargs[0],vargs[1],array[4]);
}
else if (array[1].match(/hlin/i)) {
var hargs = array[2].split(",");
hlin(hargs[0],hargs[1],array[4]);
}
else if (array[1].match(/plot/i)) {
var plotargs = array[2].split(",");
plot(plotargs[0],plotargs[1]);
}
//alert("placed:" + array);
}
} //end parse

function vlin (a,b,c) {
can.fillRect(c*10,a*10,10,(((b-a)+1)*10));
//draw the new vertical rectangle
//x1, y1, width, height
} //end method vlin

function hlin (a,b,c) {
can.fillRect(a*10,c*10,(((b-a)+1)*10),10);
//draw the new vertical rectangle
//x1, y1, width, height
} //end method hlin

function plot (a,b) {
can.fillRect(a*10,b*10,10,10);
//draw the new vertical rectangle
//x1, y1, width, height
} //end method plot

function setcan(x) {
switch(x) {
case '0':
can.fillStyle = "black";
break;
case '1':
can.fillStyle = "red";
break;
case '2':
can.fillStyle = "blue";
break;
case '3':
can.fillStyle = "lavender";
break;
case '4':
can.fillStyle = "purple";
break;
case '5':
can.fillStyle = "darkGray";
break;
case '6':
can.fillStyle = "aquamarine";
break;
case '7':
can.fillStyle = "lightBlue";
break;
case '8':
can.fillStyle = "brown";
break;
case '9':
can.fillStyle = "orange";
break;
case '10':
can.fillStyle = "lightGray";
break;
case '11':
can.fillStyle = "pink";
break;
case '12':
can.fillStyle = "green";
break;
case '13':
can.fillStyle = "yellow";
break;
case '14':
can.fillStyle = "greenish";
break;
case '15':
can.fillStyle = "white";
break;
} //end switch
//alert(can.fillStyle);
} //end method setcan.fillStyle

</script>
<style>
canvas {
background-color: black;
}
</style>
</head>
<body onload=setup();>
<H3>Enter basic statements below without line numbers and hit submit to parse the code and draw the picture.</H3>
<canvas id="myCanvas" width="400" height="400"></canvas>
<BR><BR>
<textarea id="code" name="code" rows="40" cols="65" align="left"></textarea>
<input type = "button" value = "Click me" onclick = "parse();" />

</body>
</html>