Question

I would like to show an image on Canvas(HTML5) so that I will be able to drag’n’drop it later. This is how i started, I am using a circle shape, which is being drawn on the Canvas, then i want its background texture be an image defined externally of this pasted code.
Now i have that the texture/image is being drawn at x=0, y=0 location. Since i must use ‘no-repeat’ argument for createPattern() method (picture will be enabled for drag’n’drop), so i must create pattern at the location circle.x, circle.y (these are changed on drag’n’drop). How can I make pattern be drawn at location, which is not (0, 0); ?

If you are aware of any better solution, then i am open for proposals

It is said that a picture says thousand words, so on the picture i would explain it as such:

    var ctx, circle;

    function draw(){    
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       ctx.beginPath();                 
       ctx.arc(circle.x+imageObj.width/2,circle.y+imageObj.height/2,circle.r,0,Math.PI*2,false);
       var pattern = ctx.createPattern(imageObj, 'no-repeat');   
       ctx.fillStyle = pattern;
       ctx.fillRect(circle.x,circle.y, imageObj.width, imageObj.height);
    }


window.onload = function(){
    canvas = document.getElementById('area');
    ctx = canvas.getContext('2d');

    circle = {
        x: canvas.width/2,
        y: canvas.height/2,
        r: 50
    }

    draw();     
}; 

Answer 1

Ok, i found a way, which does what I want. If you guys know of any other way, please submit your answers

    var ctx, circle;

        function draw(){    
           ctx.clearRect(0, 0, canvas.width, canvas.height);
           ctx.beginPath();                 
           ctx.arc(circle.x+imageObj.width/2,circle.y+imageObj.height/2,circle.r,0,Math.PI*2,false);
           ctx.drawImage(imageObj, circle.x, circle.y, imageObj.width, imageObj.height);
        }


    window.onload = function(){
        canvas = document.getElementById('area');
        ctx = canvas.getContext('2d');

        circle = {
            x: canvas.width/2,
            y: canvas.height/2,
            r: 50
        }

        draw();     
    };