HTML5 - createPattern（..） - 动态位置（x，y）

Question

我想在Canvas（HTML5）上显示一个图像，以便我以后可以拖放它。这就是我开始的方式，我使用的是圆形，在Canvas上绘制，然后我希望它的背景纹理是在这个粘贴代码外部定义的图像。 现在我已经在x = 0，y = 0位置绘制纹理/图像。因为我必须对 createPattern（）方法使用'no-repeat'参数（图片将为drag'n'drop启用），所以我必须在circle.x，circle.y位置创建模式（这些都是在拖拽时改变的）。如何在位置绘制 pattern ，而不是（0,0）; ？

如果你知道任何更好的解决方案，那么我愿意接受提案

据说一张图片说了千言万语，所以在图片上我会这样解释：

    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

好的，我找到了一种方法，可以满足我的需求。如果你们知道其他任何方式，请提交你的答案

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