JSFiddle - React, Tailwind, and code Playground

by 20yco

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.min.js"></script>
<p>Fabric:</p>
<canvas id="canvas" width="400" height="300"></canvas>
<p>Img toDataURL() without multiplier:</p>
<img id="imageWithoutMultiplier">
<p>Img toDataURL() with multiplier:</p>
<img id="imageWithMultiplier">

CSS

.canvas-container {
  outline: 1px dashed dodgerblue;
}

JavaScript

let canvas = new fabric.Canvas('canvas');
canvas.setBackgroundColor(new fabric.Gradient({
  type: 'linear',
  coords: {
    x1: 0,
    y1: 0,
    x2: 400,
    y2: 0
  },
  colorStops: [{
      offset: 0,
      color: 'green'
    },
    {
      offset: 0.5,
      color: 'white'
    },
    {
      offset: 1,
      color: 'blue'
    }
  ]
}), function() {
  canvas.renderAll();
  document.getElementById('imageWithoutMultiplier').src = canvas.toDataURL();
  document.getElementById('imageWithMultiplier').src = canvas.toDataURL({multiplier: 1.5});
});