setBackgroundImage examples

Used in documentation (jsdoc tag)

by Steve Eberhardt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.0.0-beta.12/fabric.min.js"></script>
<button id="changeImageBtn">change image</button>

<canvas id="c" width="600" height="600"></canvas>

CSS

canvas {
    border: 1px solid #999;
}
button {
    margin-top: 20px;
}

JavaScript

// initialize fabric canvas and assign to global windows object for debug
const canvas = new fabric.Canvas("c");
let image;

fabric.Image.fromURL("http://fabricjs.com/assets/jail_cell_bars.png", img => {
	image = img;	
  image.scaleToWidth(100);
	canvas.add(img);
}, {crossOrigin: "anonymous"});

document.querySelector("#changeImageBtn").addEventListener("click", () => {

	image.setSrc("http://fabricjs.com/assets/jail_cell_bars.png", function() {
		console.log("changed");
    console.log(image);
    image.dirty = true;
  	canvas.renderAll();
	}, {crossOrigin: "anonymous"});
});