JSFiddle - React, Tailwind, and code Playground

by John Morgan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.1/fabric.min.js"></script>
<table>
<tr>
  <td></td>
  <td>
    <canvas id="top-ruler" width="600" height="50"/>
  </td>
</tr>
<tr>
  <td>
     <canvas id="left-ruler" width="50" height="400"/>
  </td>
  <td>
    <canvas id="main-canvas" width="600" height="400"/>
  </td>
</tr>
</table>
<button id="zoomIn">+</button>
<button id="zoomOut">-</button>

JavaScript

var leftRuler, topRuler, mainCanvas;

function redrawRulers() {
  topRuler.clear();
  leftRuler.clear();
  topRuler.setBackgroundColor('#aaa');
  leftRuler.setBackgroundColor('#aaa');

  zoomLevel = mainCanvas.getZoom();

  for (i = 0; i < 600; i += (10 * zoomLevel)) {
    var topLine = new fabric.Line([i, 25, i, 50], {
      stroke: 'black',
      strokeWidth: 1
    });
    topRuler.add(topLine);
    var leftLine = new fabric.Line([25, i, 50, i], {
      stroke: 'black',
      strokeWidth: 1
    });
    leftRuler.add(leftLine);
  }
  
  // Numbers
  for (i = 0; i < 600;  i += (100 * zoomLevel)) {
  	var text = new fabric.Text((Math.round(i / zoomLevel)).toString(), {
    	left: i,
      top: 10,
      fontSize: 8
    });
    topRuler.add(text);
  }
}

$(document).ready(function() {
  
  topRuler = new fabric.Canvas('top-ruler');
  leftRuler = new fabric.Canvas('left-ruler');
  mainCanvas = new fabric.Canvas('main-canvas');
  
	var circle = new fabric.Circle({
  	radius: 200, fill: 'green', left: 100, top: 100
	});
  mainCanvas.add(circle);
  
  redrawRulers();
  
  $('#zoomIn').click(function() {
  	mainCanvas.setZoom(mainCanvas.getZoom() * 1.1);
    redrawRulers();
	});
  
  $('#zoomOut').click(function() {
  	mainCanvas.setZoom(mainCanvas.getZoom() / 1.1);
    redrawRulers();
	});
})