JSFiddle - React, Tailwind, and code Playground

by محمد رستمیانی

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.min.js"></script>

<div id="app">
  <canvas id="canvasId" width="400" height="400"></canvas>
  <canvas id="canvasId2" width="400" height="400"></canvas>
</div>

CSS

#app {
  display: flex;  
}

canvas {
  border: 1px solid red;
}

JavaScript

var canvas = new fabric.Canvas(document.getElementById('canvasId'))
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.width = 5;
canvas.freeDrawingBrush.color = '#00aeff';

canvas.on('path:created', function(e) {
  e.path.set();
  canvas.renderAll();
  drawOnCanvas(canvas.toJSON());
});

var canvas2 = new fabric.Canvas(document.getElementById('canvasId2'));
function drawOnCanvas(json) {
  canvas2.loadFromJSON(json);
}