setOverlayColor examples

Used in documentation (jsdoc tag)

by megaadriano

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 = this.__canvas = new fabric.Canvas('c');
  var text = new fabric.Textbox('MIAMI', {
    originX: 'left',
    originY: 'top',
    fill: 'red',
    fontSize: 15,
});

fabric.Image.fromURL('https://media.timeout.com/images/103859094/image.jpg', function(img){
	img.clipTo = function(ctx) {
    text.render(ctx);
}

canvas.add(img);
canvas.add(new fabric.Rect({ 
  left: 100, 
  top: 100, 
  width: 50, 
  height: 50, 
  fill: '#faa', 
  originX: 'left', 
  originY: 'top',
  centeredRotation: true
}));
canvas.renderAll();

});

canvas.on('mouse:wheel', function(opt) {
 
  var delta = opt.e.deltaY;
  var zoom = canvas.getZoom();
  zoom *= 0.999 ** delta;
  if (zoom > 20) zoom = 20;
  if (zoom < 0.01) zoom = 0.01;
  canvas.setZoom(zoom);
  console.log(zoom);
  opt.e.preventDefault();
  opt.e.stopPropagation();
  let selcanvas = document.querySelector('canvas');
  if(!window.cwidth)
  	window.cwidth = canvas.width;
    if(!window.cheight)
  	window.cheight = canvas.height;
    console.log(selcanvas.style.height); 
    //selcanvas.style.height = (window.cheight * zoom)+'px';
    //selcanvas.style.width = (window.cwidth * zoom)+'px';
    canvas.setWidth( window.cwidth  * zoom);
canvas.setHeight(window.cheight  * zoom);
canvas.calcOffset();
  console.log(canvas.width); 
})