画布上的图像上的圆角

Question

I have a canvas with an image inside it. I'm looking to put rounded corners on two corners of the image. I am thinking the way to do it would be use one of the global operators but I can't seem to figure out how I'd do that.

Any help would be appreciated.

Answer 1

Instead of using a global operator, figure out the space that you want the image to occupy (which should be a path that is a rectangle except for the rounded corners)

Then put this path on the context before you draw your image, call .clip(), and then draw the image.

The image will then be drawn with rounded corners on the two corners of the image.

So your only real task now is coming up with the path you need to do it.

In short:

ctx.save();
ctx.beginPath();
// use lineTo and BezierTo here to make the path you want, which is a rectangle the size of the image with two rounded corners.
ctx.closePath();
ctx.clip();

// draw the image
ctx.restore(); // so clipping path won't affect anything else drawn afterwards