0

This JSFiddle is what I am working on. From the code you can see that the Pug and Google images are clipped by clipRect. (Please note that my code is FabricJs, not just normal Canvas)

Now, I want to adapt that by changing the clipping region from Rectangle shape to star shape for example. So, it is too difficult to use context.beginPath(); right?, then how can I achieve that without drawing Path ? Is there a way to make star image to become clipping region ?

In addition, my goal is similar to this website. The website is about designing a mobile's case. I would very appreciate if you explain how the clipping in this website work (No advertising). To see my point, try upload an image and put it to the top-left block, your image will be clipped perfectly to the case.

You can update my JSFiddle for better example.

Mes
  • 177
  • 4
  • 13
  • You are creating a clip region then on line 77 you restore the 2D context state effectively removing the clip before you use it. Restore comes after you have used the clip region. For each render you save -> set the clip path -> turn on clip `ctx.clip()` -> draw the objects that need to be clipped -> then restore the state. BTW `ctx.rect` does not need a `ctx.closePath()` it is already closed – Blindman67 Feb 16 '16 at 16:38
  • Your explanation is pretty clear, but I still need to know if there is a way to clip an image without drawing path. Or a way to make an image to become a clipping path. – Mes Feb 16 '16 at 17:11
  • 1
    @Mes. Pardon if I'm off topic -- I didn't visit your links. You can use [source-in compositing](http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/) as a "cookie-cutter" to cut a star shape out of your rectangular shape on an html5 canvas. Then use that html5 canvas as an image source for a FabricJS.image. – markE Feb 16 '16 at 17:16
  • 1
    @Mes no you can not use the image to create a clipping path. You can use the image to create a clipping mask which does the same thing using different hardware. – Blindman67 Feb 16 '16 at 17:53
  • @Blindman67. Sounds like you've explored the external links to this question. Can you edit the question to be more clear? :-) – markE Feb 16 '16 at 18:25
  • @Blindman67. That "mask" is probably a correct answer to my topic. I am learning to apply masking to my JSFiddle. So, you may update my JSFiddle from clipping to masking if you want. Thank you. I may have to change question topic now. – Mes Feb 16 '16 at 18:31
  • @markE I only went to the fiddle, and I would not know what to change in the question, apart from, "How do I use clipping paths with Fabric.js?" – Blindman67 Feb 16 '16 at 18:52
  • http://stackoverflow.com/questions/35463613/fabric-js-how-to-mask-an-image/35477758#35477758 to clip without a path. – AndreaBogazzi Feb 26 '16 at 21:04

0 Answers0