JSFiddle - React, Tailwind, and code Playground

by franknstayn

HTML

<canvas id='canvas-element-1' width=300 height=300></canvas>
<canvas id='canvas-element-2' width=300 height=300></canvas>

CSS

canvas{
 border :2px solid #000
}

JavaScript

var canvases = {};
var imageUrls = ['', 'https://via.placeholder.com/300x300?text=canvas1', 'https://via.placeholder.com/300x300?text=canvas2'];

for (var p = 1; p <= 2; p++) {
  canvases[p] = new fabric.Canvas('canvas-element-' + p);
  var t = new fabric.Text('Testing', {
    top: 600,
    left: 0
  });
  canvases[p].add(t);
  canvases[p].renderAll();
  (function(index) {
    fabric.Image.fromURL(imageUrls[p], function(img) {
      img.set({
        width: 500,
        height: 500,
        top: 0,
        left: 0,
        
      }).scale(.2);
      canvases[index].add(img);
      canvases[index].renderAll();
    });
  })(p);
}