HTML5キャンバスの2次元コンテキストでの複数のイメージパターン？

Question

HTML5キャンバスの2次元コンテキストで複数のパターン（それぞれ異なるテクスチャを持つ）をレンダリングするのが難しいです。

私は、3つの別々のキャンバスを持っていると仮定して、2つのオフスクリーンに異なるテクスチャとレンダリングのための1つのキャンバスがあります。

var patternA = ctx.createPattern(A, "repeat-x"); 
ctx.fillStyle = patternA; 
ctx.fillRect(100,100,20,20); 

var patternB = ctx.createPattern(B, "repeat-y"); 
ctx.fillStyle = patternB; 
ctx.fillRect(150,100,20,20); 

しかし第二矩形がまったくレンダリングされません、2つの20×20の長方形、自分のパターンとそれぞれがなければならない：これらのオフラインキャンバスは、AとB

その後もしてみましょう。私はそれらを働かせるためにすべてを試しましたが、無駄です。

なぜですか？同じキャンバスに複数のタイルテクスチャをどのようにレンダリングする必要がありますか？

Answer 1

あなたはどんなブラウザを試していますか？ FireFoxとChromeでは、repeat-xまたはrepeat-yでレンダリングするパターンを取得できませんでした。代わりに、私はちょうどrepeatで両方をレンダリングすることができました。 （http://jsfiddle.net/ZthsS/1/を参照してください）

ブラウザには仕様が不完全に実装されている可能性があります。 http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-createpatternの実装状況によると、IEベータ版とFF版は毎晩すべてのテストケースを通過しますが、他のブラウザでは実行されません。当面はrepeatを使用することをお勧めします。あなたは、単にパターンの幅にfillRectの幅を制限することによってrepeat-xとrepeat-yをエミュレートすることができます：それはそうだったように

var patternA = ctx.createPattern(A, "repeat"); 
ctx.fillStyle = patternA; 
ctx.fillRect(100,100,20,Math.min(20, A.height)); 

var patternB = ctx.createPattern(B, "repeat"); 
ctx.fillStyle = patternB; 
ctx.fillRect(150,100,Math.min(20, B.width), 20);