JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.2.0/fabric.all.min.js"></script>
<div style="height:480px;width:640px;border:1px solid #ccc;position:relative;font:16px/26px Georgia, Garamond, Serif;overflow:auto;">

 <canvas id="rubber" width="800" height="800" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>

JavaScript

$(window).load(function(){
$(document).ready(function () {

    function renderGrid(x_size,y_size, color)
    {
        var canvas = $("#myCanvas").get(0);
        var context = canvas.getContext("2d");

        context.save();
        context.lineWidth = 0.5;
        context.strokeStyle = color;

        // horizontal grid lines
        for(var i = 0; i <= canvas.height; i = i + x_size)
        {
            context.beginPath();
            context.moveTo(0, i);
            context.lineTo(canvas.width, i);
            context.closePath();
            context.stroke();
        }

        // vertical grid lines
        for(var j = 0; j <= canvas.width; j = j + y_size)
        {
            context.beginPath();
            context.moveTo(j, 0);
            context.lineTo(j, canvas.height);
            context.closePath();
            context.stroke();
        }

        context.restore();
    }

   // renderGrid(10,15, "gray");
});

});//]]>  

  var canvas = new fabric.Canvas('rubber',{ backgroundImage: 'http://rpgmapper.googlecode.com/svn-history/r2/trunk/RpgMapper/assets/Textures/grid/grid.png' });


  canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));

  canvas.selectionColor = 'rgba(0,255,0,0.3)';
  canvas.selectionBorderColor = 'red';
  canvas.selectionLineWidth = 5;

canvas.renderAll();