Tainted patterns

by Hooman Askari

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script>
<canvas id="canvas" width="800" height="600"></canvas>
<button id="set-pattern">1) SET PATTERN</button>
<button id="save-canvas">2) SAVE CANVAS</button>
<button id="load-canvas">3) LOAD CANVAS</button>

<br />

<button id="export-canvas">EXPORT CANVAS</button>

CSS

#canvas {border: 1px solid #ddd;}
button {
  margin-top: 20px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 3px;
  padding: 10px 20px;
  cursor: pointer;
  margin-right: 15px;
}

JavaScript

const setPattern = document.getElementById("set-pattern")
const saveCanvas = document.getElementById("save-canvas")
const loadCanvas = document.getElementById("load-canvas")
const exportCanvas = document.getElementById("export-canvas")

var savedCanvas = null;

const canvas = new fabric.Canvas('canvas')

setPattern.addEventListener('click', ()=>{
  fabric.util.loadImage('https://firebasestorage.googleapis.com/v0/b/artboard-d98b8.appspot.com/o/artboard%2Fmockup-packs%2Fpatterns%2F05.png?alt=media&token=770525c4-448c-4cdf-a1ca-ac8224e9abe9', (img)=>{
    canvas.backgroundColor = new fabric.Pattern({
      source: img,
      repeat: 'repeat'
    })
    canvas.renderAll()
  }, null, 'anonymous')
})

saveCanvas.addEventListener('click', ()=> {
	savedCanvas = canvas.toJSON()

  console.log(canvas.backgroundColor)
})

loadCanvas.addEventListener('click', ()=> {
	canvas.loadFromJSON(savedCanvas, canvas.renderAll.bind(canvas))
  
  console.log(canvas.backgroundColor)
})

exportCanvas.addEventListener('click', ()=> {  
  console.log(canvas.toDataURL())
})

canvas.renderAll()