Posted on by Praveen Nair

A basic JavaScript drawing interpreter

Coding for fun… An attempt to make a fully JavaScript based canvas drawing interpreter in മലയാളം/Malayalam.

Try in action here – https://ninethsense.github.io/code-share/CanvasDrawing/

Source Code:

001 <html>
002     <head>
003         <meta http-equiv="content-type" content="text/html; charset=utf-8">
004         <style>
005             #c {
006               display: flex;
007                 width:100%;
008                 height:100%;
009             }
010             #t {
011               width:100%;
012             }
013             .col {
014               flex:1;min-height:80%;
015               background-color: #eee;
016               margin:1px 1px;
017             }
018             #e {
019               font-family: monospace;
020               font-weight: bold;
021               font-size:12pt;
022               caret-color: red;
023             }
024         </style>
025     </head>
026     <body>
027       <div style="display:flex;min-height:80%;border:solid 1px black;">
028         <div id="e" class="col" contenteditable>
029           മായ്‌ക്കുക<br>
030           രേഖ (ഇടത്=100, മുകൾ=100, വീതി=200, ഉയരം =200)<br>
031           വൃത്തം (ഇടത്=200, മുകൾ=200, ആരം=50, നിറം ="പച്ച" )<br>
032           ചതുരം (ഇടത്=50, മുകൾ=50, വീതി=300, ഉയരം=200)<br>
033           ചതുരം (ഇടത്=50, മുകൾ=50, വീതി=300, ഉയരം=200, നിറം = "ചുവപ്പ്")<br>
034           രേഖ (ഇടത്=100, മുകൾ=100, വീതി=200, ഉയരം =300,  നിറം ="#0000ff")
035         </div>
036         <div class="col">
037           <canvas id="c"></canvas>
038             <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
039           </svg>
040         </div>
041       </div>
042       
043       <input type="button" value="Draw" id="ok" />
044       
045
046     <script>
047       var c = document.getElementById("c");
048       c.width = c.offsetWidth;
049       c.height = c.offsetHeight;
050       var cx = c.getContext("2d");
051       
052       document.getElementById("ok").addEventListener("click", function(){
053         
054         var pgm = document.getElementById("e").innerText;
055         var lines = pgm.split("\n");
056         
057         lines.forEach(function(stmt, i) {
058           if (!stmt.trim()) return;
059           
060           var cmd = stmt.split(/{|\(| /)[0];
061           
062           var params = stmt.replace(cmd, "" ).replace(/=/g,":").replace(/\(/g,"{").replace(/\)/g,"}");
063           
064
065           params = params.replace(/ഇടത്|മുകൾ|ആരം|വീതി|ഉയരം|നിറം/gi, function(matched){
066                   return {
067                     "ഇടത്":"\"left\"", 
068                     "മുകൾ":"\"top\"", 
069                     "ആരം":"\"radius\"",
070                     "വീതി":"\"width\"",
071                     "ഉയരം":"\"height\"",
072                     "നിറം":"\"color\""
073                   }[matched];
074                 });
075           var col = {"പച്ച":"#00ff00", "ചുവപ്പ്":"#ff0000", "നീല":"#0000ff"};
076                 
077           var j = {};
078           try {
079             j = JSON.parse( params );
080             
081           } catch {
082             if (cmd != "മായ്‌ക്കുക") {
083               Err();
084               return;
085             }
086           }
087
088           if ('color' in j) {
089             if (j.color in col) {
090               cx.strokeStyle = col[j.color];
091             } else {
092               cx.strokeStyle = j.color;
093             }
094           } else {
095             cx.strokeStyle = "#000";
096           }
097           
098           cx.beginPath();
099           switch(cmd) {
100             case "മായ്‌ക്കുക":
101               cx.clearRect(0,0,c.offsetWidth,c.offsetHeight);
102               break;
103             case "വൃത്തം":
104               if ( !Number.isInteger(j.left) || !Number.isInteger(j.top) || !Number.isInteger(j.radius)) {
105                 Err();
106               }
107                 cx.arc(j.left, j.top,j.radius,0, 2 * Math.PI, false);
108               break;
109             case "രേഖ":
110               cx.moveTo(j.left, j.top);
111               cx.lineTo(j.width, j.height);
112               break;
113             case "ചതുരം":
114               cx.rect(j.left, j.top, j.width, j.height);
115               break;
116             default:
117               Err();
118               break;
119           }
120           function Err() {
121             alert(`Syntax Error in "${cmd}" at line ${i+1}`);
122           }
123
124           if (cmd != "മായ്‌ക്കുക") cx.stroke();
125           cx.closePath();
126         });
127       });
128       
129     </script>
130     </body>
131 </html>
View in GitHub | Made with wp-showgithubfile plugin