JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <title>KnifeGun</title>
</head>
    <link rel="stylesheet" href="css/default.css" />
    <script src="js/jquery.js"></script>
    <script src="js/gamequery.js"></script>
    <script src="js/init.js"></script>
<body>
    <canvas id='canvas'></canvas>
    
</body>
</html>

CSS

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

#canvas{
    margin: 20;
    padding: 0;
    border: 1px solid #000;
}

JavaScript

$(document).ready(function() {
    var height = 300;
    var width = 200;
    var canvas = $('#canvas');
    var ctx = canvas[0].getContext("2d");
    canvas.height = height;
    canvas.width = width;
    draw(canvas, ctx);
})

function draw(canvas, ctx){
    
    
    ctx.fillStyle = "#ccc";
    ctx.fillRect (0, 0, 20, 20);
}