JSFiddle - React, Tailwind, and code Playground

by tinyhustlee

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.5/fabric.min.js"></script>
<button onclick="changeBackground()">Change canvas background</button>
<canvas id="canvas" width="400" height="400"></canvas>

JavaScript

let canvas = new fabric.Canvas('canvas');
  var clipPath = new fabric.Rect({ width: 400, height:200, top: 0, left: 0, absolutePositioned: true });
  fabric.Image.fromURL('http://fabricjs.com/assets/dragon.jpg', function(img) {
    img.clipPath = clipPath;
    img.scaleToWidth(400);
    canvas.add(img);
  });
  var changeBackground = function(){
  canvas.backgroundColor = '#00ff00';
  console.log(1223);
  canvas.renderAll();
  };