Coin arrondis sur les images en toile

J'ai une toile avec une image à l'intérieur. Je cherche à placer les coins arrondis sur deux coins de l'image. Je pense que la façon de le faire serait utiliser l'un des opérateurs mondiaux, mais je n'arrive pas à comprendre comment je le ferais.

Toute aide serait appréciée.

Au lieu d'utiliser un opérateur global, découvrez l'espace que vous souhaitez que l'image occupe (ce qui devrait être un chemin rectangulaire à l'exception des coins arrondis)

Ensuite, placez ce chemin sur le contexte avant de dessiner votre image, appelez .clip (), puis dessinez l'image.

L'image sera ensuite dessinée avec des coins arrondis sur les deux coins de l'image.

Donc, votre seule véritable tâche est maintenant de trouver le chemin dont vous avez besoin pour le faire.

En bref:

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