How to put an image inside a Canvas Circle(arc) ?

[satya1907]

Hello, I want to Draw a Canvas, inside which there will be around 10 Circles and within the circle there would be images.. The images should be cropped inside the Circle. It should not overlap the Circle though the images are rectangular in size.

Let me explain it more clearly.. Let, I have 10 images of size 120 x 100 px. Now I want to Draw a Circle with 80px Diameter or 40px radius. So, I want the image to fit into the Circle without going outside OR leaving Blank space inside... How to Do It?

Here is the link to the Sandbox...

http://calebevans.me/projects/jcanvas/sandbox/?code=Ly8gRnVuY3Rpb24gZm9yIGRyYXdpbmcgYW4gYXJjCmZ1bmN0aW9uIGFyYygpIHsKICAkKCJjYW52YXMiKS5kcmF3QXJjKHsKICAgIHN0cm9rZVN0eWxlOiAiI2ZmZiIsCiAgICBzdHJva2VXaWR0aDogNCwKICAgIHg6IDE1MCwgeTogMTUwLAogICAgcmFkaXVzOiA0MAogIH0pOwp9CgovLyBSdW4gdGhlIGFyYygpIGZ1bmN0aW9uIGFmdGVyIHRoZSBpbWFnZSBoYXMgbG9hZGVkCiQoImNhbnZhcyIpLmRyYXdJbWFnZSh7CiAgc291cmNlOiAiaW1hZ2VzL2Zpc2guanBnIiwKICB4OiAxNTAsIHk6IDE1MCwKICB3aWR0aDogODAsCiAgaGVpZ2h0OiA4MCwKICBsb2FkOiBhcmMKfSk7Cg==

I want the image to be remain inside the Circle..

Please help me...

Thanks

[caleb531]

From my understanding, you want to mask the image within the circle. This is easily accomplished using layer masks in jCanvas.

Here's an example which you can throw into the jCanvas sandbox:

$("canvas")
.drawArc({
  layer: true,
  mask: true,
  x: 150, y: 150,
  radius: 60
})
.drawImage({
  layer: true,
  source: "images/fish.jpg",
  x: 150, y: 150
})
.restoreCanvas({
  layer: true
});

[satya1907]

Thanks a lot :)