title: Fabric-js patterns: How create pattern for canvas background from Rects without size depending on Zoom and blured Rects
body: <p>As end target i need to create classic chess like background for canvas to represent 'transparent' background with option to turn it to real transparent and back (in program, no direct user interaction here) - so I'm open on others ways to do it.</p>
  
  <p>At current state i have created more or less correct pattern and have added it to canvas, but also i have two problems with it to fix:</p>
  
  <ol>
  <li>Transition between two Rects and Rects vs background is blurred instead of sharp.</li>
  <li>On adding pattern to canvas it is scaled based on page visual size/zoom on page load instead of programmed size of the pattern and canvas. (To check Zoom then run sipped again)</li>
  </ol>
  
  <p>Code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// initialize fabric canvas and assign to global windows object for debug
  var canvas = window._canvas = new fabric.Canvas('c');
  
  const newTransparent = function() {
      const chessStatic = new fabric.StaticCanvas();
      chessStatic.setHeight(10);
      chessStatic.setWidth(10);
      chessStatic.renderAll();
      chessStatic.setBackgroundColor('lightgrey');
      const greyRect = new fabric.Rect({
        width: 5,
        height: 5,
        left: 0,
        top: 0,
       // fill: 'grey',
        strokeWidth: 0
      });
      greyRect.set('fill', 'rgba(150, 150, 150, 1)')
      const lightGreyRect = new fabric.Rect({
        width: 5,
        height: 5,
        left: 5,
        top: 5,
       // fill: 'grey',
        strokeWidth: 0
      });
      lightGreyRect.set('fill', 'rgba(187, 187, 187, 1)')
      
      chessStatic.add(greyRect);
      chessStatic.add(lightGreyRect);
      const greyRect2 = greyRect;
      chessStatic.add(greyRect);
      chessStatic.add(lightGreyRect);
      chessStatic.calcOffset();
      chessStatic.renderAll();
  
      const transparentPattern = new fabric.Pattern({
        source: function() {
          return chessStatic.getElement();
        },
        repeat: 'repeat'
      });
      return transparentPattern;
   }
  
  canvas.setBackgroundColor(newTransparent(), canvas.renderAll.bind(canvas));
  
  fabric.util.addListener(document.getElementById('toggle-repeat'), 'click', function () {
  
      canvas.setBackgroundColor(newTransparent(), canvas.renderAll.bind(canvas));
  const lightGreyRect = new fabric.Rect({
        width: 5,
        height: 5,
        left: 5,
        top: 5,
       // fill: 'grey',
        strokeWidth: 0
      });
      lightGreyRect.set('fill', 'rgba(187, 187, 187, 1)')
      
      canvas.add(lightGreyRect);
      canvas.renderAll();
  });
  
  fabric.util.addListener(document.getElementById('toggle-bgcolor'), 'click', function () {
      if (canvas.backgroundColor instanceof fabric.Pattern) {
          canvas.setBackgroundColor('rgba(0, 225, 64, 0.6)', canvas.renderAll.bind(canvas));
      }
      else {
          canvas.setBackgroundColor({source: 'http://fabricjs.com/assets/escheresque_ste.png'}, canvas.renderAll.bind(canvas));        
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>canvas {
      border: 1px solid #999;
  }
  button {
      margin-top: 20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"&gt;&lt;/script&gt;
  &lt;canvas id="c" width="400" height="400"&gt;&lt;/canvas&gt;
  &lt;button id="toggle-repeat"&gt;Toggle repeat&lt;/button&gt;
  &lt;button id="toggle-bgcolor"&gt;Toggle background&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>