キャンバスの長方形の背景画像

Question

私は、キャンバスの背景に私の四角形を設定したいと思います。 これまで私はこれをしました。

var img = new Image() 
    img.src = //Source of an image. 
var newPattern = ctx.createPattern(img, "no-repeat"); 
ctx.fillStyle = newPattern; 

これは機能しますが、問題はキャンバスに画像を適用し、矩形には適用しないということです。

矩形の位置を変更するたびに、画像は同じ位置にとどまります。

誰でもこの問題を解決する方法を提案できるので、画像は長方形にアタッチされます。

Answer 1

指定された矩形内にのみイメージを描画する場合は、このようなことができます。

context.rect(x, y, width, height); 
context.clip(); 
context.drawImage(img, 0, 0); 

これは、コンテキストに対するすべての将来の呼のために使用されるサイズ（幅、高さ）と（x、y）に矩形を作成します。あなたはクリッピングを停止したい場合は、上記のコードの前に

context.save(); 

を追加する必要がありますし、その後

context.restore(); 

あなたは、画像を描画した後。

JSFiddle

編集：