CODEWITHSUNDEEP
javascriptcanvas
anam
anam

Reputation: 216

Adding Image within a canvas circle

I am learning drawing canvas and now I have task. I need to add an image within the inner circle. The image position needs to be inside the circle. Also I attached the image with this post. My code are:

            <!DOCTYPE html>
            <html>
            <body>

            <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
            Your browser does not support the HTML5 canvas tag.
            </canvas>

            <script>
            var c =  document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            ctx.fillStyle = "green";
            ctx.fillRect(0,0,200,100);

            var cicleT = document.getElementById("myCanvas");
            var dtx = cicleT.getContext("2d"); 
            dtx.arc(95,50,40,0,2*Math.PI);
            dtx.stroke();
            dtx.fillStyle = "red";
            dtx.fill(); 

            dtx.fillStyle = "black"; // font color to write the text with
              var font = "bold 13px serif";
              dtx.font = font;
              dtx.textBaseline = "bottom";
              dtx.fillText("Bangladesh",50,50, 95 ,25);

            </script>

            </body>
            </html>

enter image description here

Upvotes: 0

Views: 360

Answers (1)

fuyushimoya
fuyushimoya

Reputation: 9813

You can use ctx.clip to cut out the region you want to draw, and the following operation will be refined on the region, remember to restore when you complete the works that needs to be refined.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 200, 100);

ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
ctx.fillStyle = "red";
ctx.fill(); 

// For safety, I move the draw image and draw text to image.onload.
var image = document.createElement('img');
image.onload = function() {
  var iw = image.width;
  var ih = image.height;
  var r = Math.sqrt(Math.pow(iw/2, 2) + Math.pow(ih/2, 2));
  var ratio = 40 / r;
  var tw = iw * ratio;
  var th = ih * ratio;
  
  // Use the same ctx is ok.
  ctx.arc(95, 50, 40, 0, 2 * Math.PI);
  ctx.stroke();
  // Save the current state of context, which is not clipped yet.
  ctx.save();
  
  // Clip by the stroke.
  ctx.clip();
  // Draw image.
  
  // 
  ctx.drawImage(image, 0, 0, iw, ih, 95 - tw/2, 50 - th/2, tw, th);
  
  // Restore the context, otherwise the text will also be clipped.
  ctx.restore();
  
  
  ctx.fillStyle = "black"; // font color to write the text with
  var font = "bold 13px serif";
  ctx.font = font;
  ctx.textBaseline = "bottom";
  ctx.fillText("Bangladesh", 50, 50, 95, 25);
};

image.src = "https://i.sstatic.net/jy3YL.jpg";
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
  Your browser does not support the HTML5 canvas tag.
</canvas>

Upvotes: 3

Related Questions