JSFiddle - React, Tailwind, and code Playground

by msm595

HTML

<canvas id="c"></canvas>

JavaScript

Function.prototype.chain = function() {
    var that = this;
    return function() {
        return that.apply(this, arguments)||this;
    }
};
function chain(obj) {
    for (var fn in obj) {
        if (typeof obj[fn] == "function") {
            obj[fn] = obj[fn].chain();
        }
    }
    return obj;
}

var width = 580,
    height = 400,
    tileWidth = 32,
    tileHeight = 32,
    size = 16,
    canvas = document.getElementById('c'),
    context = canvas.getContext('2d');
    context.set = function(k,v) {this[k]=v;};
chain(context);


var points = [];
for(var i=0;i<size;i++) {
    points[i] = [];
    for(var h=0;h<size;h++) {
        points[i][h]=0;
    }
}

function draw() {
    for(var x=0;x<size;x++) {
        for(var y=0;y<size;y++) {
            x_position = 0 + (x * tileWidth  / 2) - (y * tileWidth  / 2);
            y_position = 0 + (x * tileHeight / 2) + (y * tileHeight / 2);
            
            context.beginPath()
                .set("fillStyle", "rgb(244,35,35)")
                .moveTo(x_position, y_position)
                .lineTo(x_position + tileWidth / 2, y_position + tile_height / 2)
                .lineTo(x_position - tileWidth / 2, y_position + tile_height / 2)
                .fill()
                .closePath()
        }
    }
}