0 Replies Latest reply on Apr 12, 2011 4:40 AM by JorjPacha

    Draw multiple circles filled with image content

    JorjPacha

      Hi there,

       

      I am trying to draw circles on a canvas filled with portions from an image. Imagine clicking on a white canvas and where the user clicked reveal a portion of a photo.

       

      I have found ways to draw 1 circle, but can not succeed using this to draw multiples. If I repeat the action with other coordinates the drawing is not happening.

       

      function start_drawing(){
      ctx.beginPath();
      ctx.fillStyle = "rgb(255,255,255)";
      ctx.fillRect(0,0,canvas.width,canvas.height);//fill the background. color is default black
      ctx.arc(mouse.x,mouse.y,45,0,6.28,false);//draw the circle
      ctx.arc(mouse.x+100,mouse.y+100,45,0,6.28,false);
      ctx.clip();//call the clip method so the next render is clipped in last path
      ctx.drawImage(img,0,0);
      ctx.closePath();
      }

       

      Any idea on how this can be achieved ?
      Thank you.