JSFiddle - React, Tailwind, and code Playground

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
  <title>Google maps test</title>
  <head>

    <script src="http://maps.google.com/maps?file=api&v=1&key=YOURKEYHERE" type="text/javascript"></script>
  </head>
  <body>
    <div id="map" style=" position: absolute; width: 400px; height: 300px; opacity: 0.6;"></div>
    <canvas id="can" width="400" height="300"></canvas>
    <script type="text/javascript">
    //<![CDATA[
    
    var map = new GMap(document.getElementById("map"));
    map.addControl(new GSmallMapControl());    
    map.centerAndZoom(new GPoint(-56.07421875, 4.258768357307995), 10);
    
    //]]>   
    </script>
  </body>
</html>

JavaScript

var canvas;
var draw;

canvas = document.getElementById('can');

draw = canvas.getContext('2d');
draw.fillStyle = 'rgba(0,0,0,1)';
//draw.fillRect(0, 0, '500', '500');
draw.fillStyle = 'green';
draw.fillRect(150, 150, 150, 150);