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

我试图在画布上创造一个洞；然后将图像加载到画布中

我希望这个画布在顶层包含一个洞

我刚刚阅读了逆时针画布规则，然后创建了一个逆时针位置的孔，如下所示-

  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();

我有画布在它的图像之前-

在此画布中应用图像后-

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

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

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

   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();
   }

画布-

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

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

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

   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();
   }

正如你从两张图片中看到的，我无法在画布上找到这个洞

---

如何创建此弧，使图像不会与此弧重叠。

我解决了此问题-

我必须做的事-

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

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

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

   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();
   }

在更改文件时，我清空了画布并重新绘制了图像，然后在加载图像时 正在将圆弧创建为逆时针位置-

在图像更改时再次绘制画布-

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

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

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

   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();
   }

创建图像并根据更改的输入为其提供所需的src-

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

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

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

   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();
   }

加载图像并平行创建圆弧-

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

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

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

   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();
   }

---

先画图像，然后画洞？做一个@you是惊人的，先画图像，然后画洞，但没有工作，因为图像正在上传，这可能是一个原因。