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:

put image on bottom layer put polygon on top layer put custom shape on top layer use custom shape html canvas context [context=layer.getcontext()._context] use 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

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -