Draw a Round Image using Canvas caused a slightly different result

Question

I want to draw a image which is Square to canvas and round it.

My code is

    const x = 100
    const y = 100
    const iconRadius = 60
    const iconWidth = iconRadius * 2
    const iconHeight = iconRadius * 2

    ctx.beginPath()
    ctx.moveTo(x + iconRadius, y)
    ctx.lineTo(x + iconWidth - iconRadius, y)
    ctx.quadraticCurveTo(x + iconWidth, y, x + iconWidth, y + iconRadius)
    ctx.lineTo(x + iconWidth, y + iconHeight - iconRadius)
    ctx.quadraticCurveTo(
      x + iconWidth,
      y + iconHeight,
      x + iconWidth - iconRadius,
      y + iconHeight
    )
    ctx.lineTo(x + iconRadius, y + iconHeight)
    ctx.quadraticCurveTo(x, y + iconHeight, x, y + iconHeight - iconRadius)
    ctx.lineTo(x, y + iconRadius)
    ctx.quadraticCurveTo(x, y, x + iconRadius, y)
    ctx.closePath()
    ctx.clip()

    drawImageProp(ctx, userIconImage, x, y, iconWidth, iconHeight)

but the result is like:

I use this solution Looks like it is not a Round image, I donot know how to fix it.

Answer 1

In order to draw a circle you can use the arc method of the canvas context.

    ctx.beginPath();  
    ctx.arc(x+iconRadius, y+iconRadius,iconRadius,0,2*Math.PI);
    ctx.stroke();

However if what you want is drawing a circle using bezier curves, maybe for a future animation, here is how I would do it:

let ctx = canvas.getContext("2d");
canvas.width=320;
canvas.height=320;
const x = 100
    const y = 100
    const iconRadius = 60
    const iconWidth = iconRadius * 2
    const iconHeight = iconRadius * 2

    ctx.beginPath();  
    ctx.arc(x+iconRadius, y+iconRadius,iconRadius,0,2*Math.PI);
    ctx.stroke();
    
    //drawElipseWithBezier(ctx, x, y, iconWidth, iconHeight)
    ctx.clip()

    ctx.drawImage(userIconImage, x, y, iconWidth, iconHeight)

function drawElipseWithBezier(ctx, x, y, w, h) {
        var kappa=0.5522847498;
        var ox = (w / 2) * kappa; // horizontal offset
        var oy = (h / 2) * kappa; // vertical offset
        var xf = x + w;           // x final
        var yf = y + h;           // y final
        var xm = x + w / 2;       // x middle
        var ym = y + h / 2;       // y middle
        
        ctx.beginPath();                   
        
        ctx.moveTo( x, ym );
        ctx.bezierCurveTo( x, ym - oy, xm - ox, y, xm, y );
        ctx.bezierCurveTo( xm + ox, y, xf, ym - oy, xf, ym );
        ctx.bezierCurveTo( xf, ym + oy, xm + ox, yf, xm, yf );
        ctx.bezierCurveTo( xm - ox, yf, x, ym + oy, x, ym );
        ctx.closePath();
        ctx.stroke();
  }

canvas{border:1px solid}

<canvas id="canvas">
  <img src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAZAAD/4QMBaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjM0ODBGMTdBQjMwQTExRTdBMTMzQ0JDMjUzRkE2MDhFIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjM0ODBGMTc5QjMwQTExRTdBMTMzQ0JDMjUzRkE2MDhFIiB4bXA6Q3JlYXRvclRvb2w9IjguMSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSI3RURCQTlGMDRBOThGQjcwM0QzQzk4MzYwQjAyNDM1QSIgc3RSZWY6ZG9jdW1lbnRJRD0iN0VEQkE5RjA0QTk4RkI3MDNEM0M5ODM2MEIwMjQzNUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7QBIUGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAA8cAVoAAxslRxwCAAACAAIAOEJJTQQlAAAAAAAQ/OEfici3yXgvNGI0B1h36//uAA5BZG9i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" id="userIconImage"/>
</canvas>

To understand better please read this article: Drawing a circle with Bézier Curves