HTML5 - createPattern（..） - 動的位置（x、y）

Question

Canvas（HTML5）に画像を表示して、後でドラッグアンドドロップすることができます。これは私がどのように始めたか、私はキャンバスに描画されている円の形を使っています。そして、その背景のテクスチャを貼り付けられたコードの外部に定義されたイメージにします。 今私はテクスチャ/画像がx = 0、y = 0の位置に描画されていることがあります。私はのno-repeat引数をcreatePattern（）メソッドで使用する必要があるので（drag'n'dropのために画像が有効になります）、circle.x、circle.yの位置にパターンを作成する必要がありますドラッグアンドドロップ）。 パターンを（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

[OK]を、私は私が欲しいものを行う方法を見つけました。あなたが他の方法を知っているなら、あなたの答えを提出してください。

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