JSFiddle - React, Tailwind, and code Playground

by fordcars

HTML

<h1>Hi, this is a Javascript micro-operating system</h1>
<canvas id="canId" width="300" height="300"></canvas>
<br>
    <input type="text" id="inputId">
        <button onclick="">Enter</button>

CSS

canvas {background-color:#000000;}

JavaScript

var canNode;
var can;
var lineArray = [];
 
canNode = document.getElementById("canId");
can = canNode.getContext("2d");
 
can.font = "20px Courier New";
can.fillStyle = "lime"; 

function newLine(lineString)
{
    can.clearRect(0,0,300,300);
    var lineObj = {};
    lineObj.xLoc = 300;
    lineObj.text = "$" + lineString;
    lineArray.push(lineObj);
    for(i=0;i<lineArray.length;i++)
    {
        lineArray[i].xLoc = lineArray[i].xLoc - 20;
        if(lineArray[i].xLoc < 15)
           {
                     lineArray.splice(i,1);
                     i = i - 1;
           }
        else
        {
can.fillText(lineArray[i].text,0,lineArray[i].xLoc);
        }
    }
}

function enterPressed()
{alert("h");
    var inputValue = document.getElementById("inputId").value;
    newLine(inputValue);
}