as shown below, using the shared image generated by canvasAPI provided by Mini Program, you can only see the QR code part of the circle image. You can draw a circle image after using ctx.clip and then using ctx.drawImg. But what to do with the remaining frames?
draw circle code:
drawCircleImg: function (ctx, img, x, y, r) {
ctx.save();
var d = 2 * r;
var cx = x - r;
var cy = y - r;
ctx.beginPath();
ctx.arc(x, y, r, 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(img, cx, cy, d, d);
ctx.restore();
}
share pictures: