html5中的画布孔，图像不起作用

Question

I am trying to create a hole in canvas; and loading image in canvas after.

I want this canvas to contain a hole at a top layer.

I just read about counter-clockwise canvas rules and then created hole with counter clockwise position as below-

  var c = document.getElementById("canvas-front");
        var ctx = c.getContext("2d");
        var centerX = c.width / 2;
        var centerY = c.offsetTop;
        var radius = 30;
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI,true);//boolean true to counter-clockwise
        ctx.fillStyle = 'black';
        ctx.fill();

I have canvas before image in it-

After applying image in this canvas-

Canvas-

                    <canvas id="canvas-front" width="261" height="506"></canvas>

As you can see from both the images, I can't get this hole in canvas work.

How do I create this arc so that image doesn't overlap this.

Answer 1

I get this issue solved-

What I had to do-

On change of file I did empty to canvas and redrew image and then while image is being loaded the arc is being created to counter-clockwise position-

Drawing the canvas again on image change-

   var canvas = document.getElementById("canvas-front");
                        canvas.width = canvas.width;//blanks the canvas
                        var c = canvas.getContext("2d");

Creating image and giving it required src from changed input-

 var img = new Image();
    img.src = e.target.result;

Loading image and creating arc parallely-

   img.onload = function () {
   c.drawImage(img, 0, 0);
   var centerX = canvas.width / 2;
   var centerY = canvas.offsetTop;
   var radius = 30;
   c.beginPath();
   c.arc(centerX, centerY, radius, 0, 2 * Math.PI, true);
   c.fillStyle = 'black';
   c.fill();
   }