javascript - Make transparent eraser in kineticjs -
javascript - Make transparent eraser in kineticjs -
hi how create transparent eraser using kineticjs or using canvas.
i need erase part of polygon on image, create part of polygon transparent , image should remain same.
you need access context's globalcompositeoperation="destination-out"
acts "eraser". kineticjs context not give globalcompositeoperation you'll have dig "real" html canvas context:
context.globalcompositeoperation="destination-out"
"erase" polygon , allow image underneath show through. here's illustration of shape object "erases" image:
http://jsfiddle.net/m1erickson/yv9qn/
var myshape = new kinetic.shape({ x: 0, y: 0, fill:"blue", drawfunc: function(context) { var ctx=layer.getcontext()._context; ctx.save(); ctx.globalcompositeoperation="destination-out"; for(var i=0;i<this.cutouts.length;i++){ var cut=this.cutouts[i]; ctx.fillrect(cut.x,cut.y,cut.width,cut.height); } ctx.restore(); } }); myshape.cutouts=[]; layer.add(myshape); myshape.cutouts.push({x:75,y:75,width:30,height:30}); myshape.cutouts.push({x:225,y:75,width:30,height:30}); myshape.cutouts.push({x:150,y:125,width:30,height:30});
javascript html5 canvas transparency kineticjs
Comments
Post a Comment