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;	
	canvas.add(img);
}, {crossOrigin: "anonymous"});

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

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