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
Post a Comment