JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<input type="button" id="setBck" value="set background image">
<canvas id="c" width="700" height="800"></canvas>

JavaScript

var canvas = new fabric.Canvas('c');
var myImg = 'https://upload.wikimedia.org/wikipedia/commons/2/2b/12_Oh%2C_said_the_man%2C_I_am_able_to_do_everything._-_Russian_Fairy_Book_1916%2C_illustrator_Frank_C_Pape.jpg';
$('#setBck').on('click', addImg);

function addImg() {
 canvas.setBackgroundImage(myImg, canvas.renderAll.bind(canvas), {
    opacity: 0.5,
    angle: 0,
    left: 50,
    top: 70,
    //width: 300,
    //height: 50,
    originX: 'left',
    originY: 'top',
    crossOrigin: 'anonymous'
  });
}