How to remove the border left by canvas drawing a round picture (Mini Program)?

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:

Front-end canvas html5 Mini-Program javascript

Aug.11,2021

set track color transparency: ctx.setStrokeStyle ('rgba')

ctx.clip();
ctx.strokeStyle='white';
ctx.drawImage(img, cx, cy, d, d);
ctx.restore();

try it. If not, consider using css3 scale to zoom in, and then overflow:hidden;

Previous: How to configure echarts? for externals of webpack4 Invalid

Next: How to create a restful-style webservcie, based on maven without using a framework like CXF?