JSFiddle - React, Tailwind, and code Playground

by awesomespaceman

HTML

<body>


<canvas id = "arena" width ="400" height = "400" style = "border:5px solid"></canvas>
<script src = "index.js"></script>
</body>

JavaScript

var canvas = document.getElementById("arena");
var ctx = canvas.getContext("2d");
var matrixp1 = [
[0, 0, 0, 1, 1, 1, 1, 0, 0, 0],
[0, 0, 0, 1, 0, 0, 1, 0, 0, 0],
[0, 0, 0, 1, 1, 1, 1, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 1, 0, 0, 1, 0, 0, 0],
[0, 0, 0, 1, 0, 0, 1, 0, 0, 0],
[0, 0, 0, 1, 0, 0, 1, 0, 0, 0],
];

matrixp1.forEach((row, y) => {
row.forEach((value, x) => {
if(value = 1){
ctx.fillStyle = "red"
ctx.fillRect(x+100, y+100, 1, 1)
}
});
});