HTML5 Canvas - Fill circle with image

Question

How can I draw an image inside a circle? If I do:

context.beginPath();
context.arc((e.pageX),(e.pageY),161,0,Math.PI*2,true);
context.closePath();
         


        

Answer 1

Consider using some of these alternatives:

• Using an with CSS for border-radius: http://jsfiddle.net/ChrisMorgan/BQGxA/

• Use SVG rather than and set the ellipse as the clipping path for an image. (More complex clipping paths are then easy, too)

Not knowing more about your requirements and situation I don't know if these will satisfy your requirements, but I think they're worth while considering. isn't the solution to all your problems - for many of these cases, CSS in normal HMTL and/or SVG may be a better match.