JSFiddle - React, Tailwind, and code Playground

by boia

HTML

<body>
    <canvas id="mycanvas" width=500 height=400></canvas>
    <script src="led.js" type="text/javascript"></script>
</body>

CSS

canvas {
    border: 1px solid #4c4c4c;
    border-radius: 10px;
    background: #0A0A0A;
    box-shadow: 5px 5px rgba(0, 100, 100, .6);
}

JavaScript

var mycanvas = document.getElementById("mycanvas");
var ctx = mycanvas.getContext("2d");

/*ctx.beginPath();
ctx.fillStyle = "RGB(255,0,0)";
ctx.arc(100,100,10,0,2*Math.PI,true);
ctx.fill();*/

//数字0-9
var nums = [];
var i = 0;
nums.push([{
    x: 0,
    y: 0
}, {
    x: 0,
    y: 1
}, {
    x: 0,
    y: 2
}, {
    x: 0,
    y: 3
}, {
    x: 0,
    y: 4
}, {
    x: 0,
    y: 5
}, {
    x: 0,
    y: 6
}, {
    x: 1,
    y: 0
}, {
    x: 1,
    y: 6
}, {
    x: 2,
    y: 0
}, {
    x: 2,
    y: 6
}, {
    x: 3,
    y: 0
}, {
    x: 3,
    y: 1
}, {
    x: 3,
    y: 2
}, {
    x: 3,
    y: 3
}, {
    x: 3,
    y: 4
}, {
    x: 3,
    y: 5
}, {
    x: 3,
    y: 6
}]);
nums.push([{
    x: 3,
    y: 0
}, {
    x: 3,
    y: 1
}, {
    x: 3,
    y: 2
}, {
    x: 3,
    y: 3
}, {
    x: 3,
    y: 4
}, {
    x: 3,
    y: 5
}, {
    x: 3,
    y: 6
}]);
nums.push([{
    x: 0,
    y: 0
}, {
    x: 1,
    y: 0
}, {
    x: 2,
    y: 0
}, {
    x: 3,
    y: 0
}, {
    x: 3,
    y: 1
}, {
    x: 3,
    y: 2
}, {
    x: 3,
    y: 3
}, {
    x: 2,
    y: 3
}, {
    x: 1,
    y: 3
}, {
    x: 0,
    y: 3
}, {
    x: 0,
    y: 4
}, {
    x: 0,
    y: 5
}, {
    x: 0,
    y: 6
}, {
    x: 1,
    y: 6
}, {
    x: 2,
    y: 6
}, {
    x: 3,
    y: 6
}]);
nums.push([{
    x: 0,
    y: 0
}, {
    x: 1,
    y: 0
}, {
    x: 2,
    y: 0
}, {
    x: 3,
    y: 0
}, {
    x: 3,
    y: 1
}, {
    x: 3,
    y: 2
}, {
    x: 3,
    y: 3
}, {
    x: 2,
    y: 3
}, {
    x: 1,
    y: 3
}, {
    x: 0,
    y: 3
}, {
    x: 1,
    y: 6
}, {
    x: 2,
    y: 6
}, {
    x: 3,
    y: 4
}, {
    x: 3,
    y: 5
}, {
    x: 0,
    y: 6
}, {
    x: 3,
    y: 6
}]);
nums.push([{
    x: 0,
    y: 0
}, {
    x: 0,
    y: 1
}, {
    x: 0,
    y: 2
}, {
    x: 3,
    y: 0
}, {
    x: 3,
    y: 1
}, {
    x: 3,
    y: 2
}, {
    x: 3,
    y: 3
}, {
    x: 2,
    y: 3
}, {
    x: 1,
    y: 3
}, {
    x: 0,
    y: 3
}, {
    x: 3,
    y: 4
}, {
    x: 3,
    y: 5
}, {
    x: 3,
    y: 6
}]);
nums.push([{
    x: 0,
 ...