HTML5 - createPattern (..) - динамическое расположение (x, y)

Question

Я хотел бы показать изображение на холсте (HTML5), чтобы позже его можно было перетаскивать.Вот как я начал, я использую форму круга, который рисуется на холсте, а затем я хочу, чтобы его фоновая текстура была изображением, определенным снаружи этого вставленного кода.Теперь у меня есть то, что текстура / изображение рисуется в положении x = 0, y = 0.Поскольку я должен использовать аргумент «no-repeat» для метода createPattern () (картинка будет включена для drag'n'drop), поэтому я должен создать шаблон в месте circle.x, circle.y (они изменены на drag'n'drop).Как сделать так, чтобы шаблон был нарисован в локации, которой нет (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();     
    };