JSFiddle - React, Tailwind, and code Playground

by Kai

HTML

<canvas id="canvas" width="300" height="300"></canvas>

CSS

#canvas {
    border: 1px solid #000;
}

JavaScript

(function () {
    var canvas = document.getElementById('canvas'),
        ctx = canvas.getContext('2d');
    
    function drawGrid () {
        var w = canvas.width,
            h = canvas.height,
            i = 0;
        
        for (; i < w; i+=10) {
            ctx.moveTo(0, i);
            ctx.lineTo(w, i);
        }
        
        for (i = 0; i < h; i+=10) {
            ctx.moveTo(i, 0);
            ctx.lineTo(i, h);
        }
        
        ctx.lineWidth = 0.2;
        ctx.strokeStyle = '#333';
        ctx.stroke();
    }
    
    function Tron (x, y, radius, color) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = color;
    }
    
    Tron.prototype.draw = function () {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
        ctx.closePath();
        ctx.fillStyle = this.color;
        ctx.fill();
    }
    
    drawGrid();
    
    var n = new Tron(150, 150, 5, 'darkgreen');

    n.draw();
}());