JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

body, html {
    height: 100%;
    width: 100%;
    margin: 0px;
}
canvas {
    background: #ffcccc;
    height: 100%;
    width: 100%;
    display: block;
}

JavaScript

var game;

function game (){
    
    this.canvas = document.getElementById('canvas');
    
    this.ctx = this.canvas.getContext('2d');
    
    
    
    this.initCanvas = function(){
        
    }
    
    this.draw1 = function(){
        this.ctx.beginPath();
        this.ctx.arc(50, 75, 10, 0, Math.PI*2, true); 
        this.ctx.closePath();
        this.ctx.fill();
    }

    this.draw2 = function(){
        this.ctx.beginPath();
        this.ctx.arc(100,75,10,0,Math.PI*2,true);
        this.ctx.closePath();
        this.ctx.stroke();
    }
    
    this.run = function(){
        this.initCanvas();
        this.draw1();
        this.draw2();
    }
    
    window.onresize = function() {
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight;
    };
}

game = new game();

game.run();