How to put image in to circle canvas?

Question

>>> Jsfiddle

var c = document.getElementById("myCanvas");
                            var ctx = c.getContext("2d");
                            ctx.beginPath();
                            ctx.arc(55,95,30,0,2*Math.PI);
                            ctx.stroke();

var canvas = document.getElementById('myCanvas'),
context = canvas.getContext('2d');

make_base();

function make_base()
{
  base_image = new Image();
  base_image.src='https://www.gravatar.com/avatar/4af2cdbaf02d97ba88d5d6daff94fbae/?default=&s=80';
  base_image.onload = function(){
    context.drawImage(base_image, 20, 20);
  }
}

<canvas id="myCanvas"  
        width="236" 
        height="413" 
        style="border:1px solid #000000; 
               position:absolute; 
               top:66px; 
               left:22px;"></canvas>

I have try to put the image in to canvas instead my circle position. but i don't know how to resize square image to circle with same size of my draw circle and put in to the same position.

What should i do?

Answer 1

window.onload=function(){
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");

        c.addEventListener("click",function(){
                        ctx.clearRect(0, 0, c.width, c.height);
                        var object = images.shift();
                        images.push(object);
                        create(ctx);
                    },false)

        var loaded=0;
        var error=0;

        var images=new Array
        (
            {
                image:null,
                url:"https://www.gravatar.com/avatar/4af2cdbaf02d97ba88d5d6daff94fbae/?s=80",
                expandW:0,
                expandH:0,
                clip:false,
                visible:true,
                shape:
                {
                    x:0,
                    y:0,
                    rect:
                    {
                        w:30,
                        h:50
                    },
                    boundary:
                        function(){return {w:this.rect.w,h:this.rect.h,centerX:this.rect.w/2,centerY:this.rect.h/2};}
                }
            },
            {
                image:null,
                url:"http://iconbug.com/data/7c/512/6e1cd685219a18b951b191ad04407324.png",
                expandW:0,
                expandH:0,
                clip:true,
                visible:true,
                shape:
                {
                    x:30,
                    y:30,
                    circle:
                    {
                        r:30
                    },
                    boundary:
                        function(){return {w:this.circle.r*2,h:this.circle.r*2,centerX:0,centerY:0};}
                }
            }
        );

        function loadImages(ctx)
        {

            for (var i=0;i<images.length;i++)
            {

                images[i].image= new Image();
                images[i].image.src = images[i].url;

                images[i].image.onerror=function(){
                    loaded++;
                    error++;
                    loadedText(images.length,loaded,error);

                    if(loaded===images.length)
                    {
                        create(ctx);
                    }
                };
                images[i].image.onload=function(){

                    loaded++;

                    loadedText(images.length,loaded,error);



                    if(loaded===images.length)
                    {
                        create(ctx);
                    }
                };
            }
        }
        function loadedText(sum,count,error)
        {
            if(error)
                console.log((count-error)+" images loaded from "+count+"."+error+" images not loaded.");
            else
                console.log(count+" images loaded from "+count+".");
        }
        function create(ctx)
        {

            for (var i=0;i<images.length;i++)
            {
                ctx.save();
                if(images[i].image !==null && images[i].visible)
                {
                    var object=images[i];
                    var boundary=object.shape.boundary();
                    var image=object.image;
                    var shape=object.shape;
                    if(shape.circle)
                    {
                        drawCircle(
                            shape.x,
                            shape.y,
                            shape.circle.r,
                            ctx,
                            object.clip
                        );
                    }
                    if(shape.rect)
                    {
                        drawRect(
                            shape.x,
                            shape.y,
                            shape.rect.w,
                            shape.rect.h,
                            ctx,
                            object.clip
                        );
                    }
                    if(!object.clip)
                    {

                        image.width=image.width*(boundary.w/image.width);
                        image.height=image.height*(boundary.h/image.height);
                    }
                    image.width=image.width+object.expandW;
                    image.height=image.height+object.expandH;

                    var x=(shape.x+boundary.centerX)-image.width/2;
                    var y=(shape.y+boundary.centerY)-image.height/2;

                    ctx.drawImage(image, x, y,image.width,image.height);
                }
                ctx.restore();
            }
        }
        function drawCircle(x,y,r,ctx,clip){
            ctx.beginPath();
            ctx.arc(x, y, r, 0, 2 * Math.PI);
            if(clip)
            {
                ctx.clip();
            }
            ctx.stroke();
        }
        function drawRect(x,y,w,h,ctx,clip){
            ctx.beginPath();
            ctx.rect(x, y, w, h);
            if(clip)
            {
                ctx.clip();
            }
            ctx.stroke();
        }

        loadImages(ctx);
};

Add multiple images.

If you do not have many pictures, it is easier to load them at once.

On console (F12) you can see load progress.

Every image has is own options.

image- it will populated latter

url- address

expandW, expandH- you can manipulate Picture after clipping.

clip- do we make picture size of image or we clip shape from image.

visible- do we show image.

shape-clipping shape

shape options

x,y-position of shape

rect or circle type of shape.

boundary- we get shape centre position and shape with and height. (circle with and height is actually double of radius).

with mouse click on canvas you can cycle through all loaded pictures.

Answer 2

You have to use clip for this. Here is Codepen for this http://codepen.io/sam83045/pen/eBKRPr?editors=0010

And your edited javascript code is as follows :

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(55, 95, 30, 0, 2 * Math.PI);
ctx.clip();
ctx.stroke();

var canvas = document.getElementById('myCanvas'),
  context = canvas.getContext('2d');

make_base();

function make_base() {
  base_image = new Image();
  base_image.src = 'https://www.gravatar.com/avatar/4af2cdbaf02d97ba88d5d6daff94fbae/?default=&s=80';
  base_image.onload = function() {
    context.drawImage(base_image, 16, 55);
  }
}