How to wrap a png image around its canvas edges?

Question

JavaScript

pic  = new Image();
    pic.src  = image;
    reset(pic.width, pic.height);

    ctx.drawImage(pic, 0, 0);
    ctx.globalCompositeOperation = "destination-atop";
    ctx.fillStyle="blue";
    ctx.fillRect(0,0,1200,1200);

Result

How can I make the photo of the cover rounded along its contour so that there is no blue at the edges?

Answer 1

Set the css property of the canvas layer to border-radius: X% or use a quadratic bezier curve - the method for drawing such a curve is built in called quadraticCurveTo.
fillRect is not an option, simply because it doesn't round.
Isn't just painting the inside an option?