0

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-

enter image description here

After applying image in this canvas-

enter image description here

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.

3
  • 1
    draw image first and then draw hole? Jun 21, 2014 at 5:53
  • Make a Fiddle
    – Bhavik
    Jun 21, 2014 at 5:54
  • @Thou art amazing, Drew image first and then drew hole and didn't work, because image is being uploaded that may be a reason. Jun 21, 2014 at 6:04

1 Answer 1

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.