setPattern examples

Used in documentation (jsdoc tag)

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="400" height="400"></canvas>

CSS

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

JavaScript

var canvas = window._canvas = new fabric.Canvas('c');

fabric.Image.fromURL('https://assets-cdn.github.com/images/modules/site/integrators/slackhq.png', function(img) {
  var patternSourceCanvas = new fabric.StaticCanvas()
  patternSourceCanvas.add(img)
  patternSourceCanvas.setBackgroundColor('red', patternSourceCanvas.renderAll.bind(patternSourceCanvas))
  patternSourceCanvas.set({
  	width: 400,
    height: 400
  });

  var pattern = new fabric.Pattern({
    source: function() {
      return patternSourceCanvas.getElement();
    },
    repeat: 'no-repeat'
  })

  // create a rectangle object
  var rect = new fabric.Rect({
    fill: pattern,
    width: 400,
    height: 400
  })

  // "add" rectangle onto canvas
  canvas.add(rect)

})