JSFiddle - React, Tailwind, and code Playground

javascript editor - canvas

by abubelinha

HTML

<textarea id="cnsl" rows=20 cols=70 style="overflow:scroll;">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,180,75);
ctx.font = "30px Arial";
ctx.fillStyle = "blue";
ctx.fillText("Hello World",10,50);
</textarea>
<button onclick="run();"> run </button>
<div id="midiv">
</div>
<canvas id="canvas" width="200" height="200"></canvas>

JavaScript

var cnsl = document.getElementById('cnsl');

function run() {    
    return eval(cnsl.value); // << did the trick ;)
}

//canvas
var ctx;

function setup() {
    var canvas = document.getElementById('canvas');
        ctx = canvas.getContext('2d');
}
setup();