javascript - move clip area to center of canvas, Fabric js -


i created clipped area in canvas using fabricjs, here clipped area have created,

var canvasdefaultwidth  = 350;  var canvasdefaultheight = 180;    var targetcanvas = document.getelementbyid('canvas');    canvas = new fabric.canvas(targetcanvas);    canvas.setwidth(canvasdefaultwidth);  canvas.setheight(canvasdefaultheight);    canvas.backgroundcolor = '#fff';  canvas.clipto = function(ctx) {                         ctx.beginpath();    var rect = new fabric.rect({      fill: '#fff',      opacity: 1,      left: 35,      top: 15,      width: 280,      height: 150,    });    rect.render(ctx);  }  canvas.controlsaboveoverlay = true;    var text = new fabric.itext('lorem ipsum dolla');  canvas.add(text);    canvas.renderall();
html{background:#cfcfcf}  canvas{ border: 1px solid #000; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.2/fabric.min.js"></script>  <body>    <canvas id="canvas"></canvas>  </body>

i used left , top attribute move clipped area go center , middle of canvas manually, posibble make clipped area go center , middle of canvas automatic although increase canvas size or decrease clipped area size ??


Comments

Popular posts from this blog

wordpress - (T_ENDFOREACH) php error -

Export Excel workseet into txt file using vba - (text and numbers with formulas) -

Using django-mptt to get only the categories that have items -