setPattern examples

Used in documentation (jsdoc tag)

by iammapping

HTML

<script src="http://fabricjs.com/lib/fabric.js"></script>
<canvas id="c" width="500" height="500"></canvas>
<button id="toggle">Toggle repeat</button>

CSS

body {
    background: #999;
    padding: 0;
    margin: 0;
}
button {
    margin-top: 20px;
}

JavaScript

var canvas = new fabric.Canvas('c');
  var clipPath = new fabric.Rect({ width: 100, height:100, top: -250, left: -250 });
  var clipPath2 = new fabric.Rect({ width: 100, height:100, top: -250, left: -150 });
  fabric.Image.fromURL('http://fabricjs.com/lib/pug.jpg', function(img) {
    img.clipPath = clipPath;
/*     img.scaleToWidth(200); */
    img.padding = 0;
    img.top = 0;
    img.left = 0;
    canvas.add(img);
  });
  fabric.Image.fromURL('http://fabricjs.com/lib/pug.jpg', function(img) {
    img.clipPath = clipPath2;
/*     img.scaleToWidth(200); */
    img.padding = 0;
    img.top = 0;
    img.left = 0;
    canvas.add(img);
  });