Fabric JS - Issue in Scrollable Div
Fabric JS - Issue in Scrollable Div
HTML
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="a" width="400" height="400"></canvas>
CSS
canvas {
border: 1px solid #999;
}
JavaScript
/**
* fabric.js template for bug reports
*
* Please update the name of the jsfiddle (see Fiddle Options).
* This templates uses latest dev verison of fabric.js (https://rawgithub.com/kangax/fabric.js/master/dist/all.js).
*/
// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('a', {
backgroundColor: '#FFF',
});
canvas.canvas_h = 400;
canvas.canvas_w = 400;
canvas.freeDrawingBrush.width = 2;
canvas.freeDrawingBrush.color = '#005E7A';
canvas.setHeight(canvas.canvas_h).setWidth(canvas.canvas_w);
canvas.controlsAboveOverlay = true;
// add red rectangle
var rect1 = new fabric.Rect({
width: 80,
height: 50,
left: 60,
top: 5,
fill: 'black',
stroke: 'black'
});
// add green, half-transparent circle
var circle = new fabric.Circle({
radius: 60,
left: 260,
top: 5,
fill: null,
stroke: 'black'
});
var circle2 = new fabric.Circle({
radius: 60,
left: 100,
top: 200,
fill: 'black',
stroke: 'black'
});
fabric.Image.fromURL('http://fabricjs.com/assets/pug.jpg', function(img) {
canvas.add(img);
canvas.add(circle);
});
canvas.clipTo = function(ctx) {
circle2.render(ctx);
circle.render(ctx);
}
//canvas.add(rect1);