Firefox3.5 の Canvas の描画結果が他のブラウザと異なる

JavaScript canvas 問題

ついったーだと長すぎたので、こっちに書きます。

http://uupaa-js-spinoff.googlecode.com/svn/trunk/uuCanvas.js/demo1/5_1_canvas_savestate+shadow.html

の結果が他のブラウザと異なります。

  1. ctx.globalCompositeOperation = "destination-over""source-out"
  2. ctx.fillText()

で既に描画されている領域がクリアされてしまうようです。


      <canvas id="canvas" width="300" height="300"></canvas>
      <canvas id="vmlcanvas" class="vml" width="300" height="300"></canvas>

    <script>
      function boot() {
        draw(document.getElementById('canvas').getContext('2d'));
        draw(document.getElementById('vmlcanvas').getContext('2d'));
      }
      function draw(ctx) {
        ctx.textBaseline = "top";
        ctx.font = "16pt Arial";
        ctx.shadowColor = "red";
        ctx.shadowOffsetX = 10;
        ctx.shadowOffsetY = 10;
        ctx.shadowBlur = 10;
        ctx.fillText("red shadow", 80, 20);
        ctx.save();
        ctx.textAlign = "center";
        ctx.font = "20pt 'Arial Black'";
        ctx.fillStyle = "#09F";
        ctx.shadowColor = "green";
        ctx.shadowOffsetX = 5;
        ctx.shadowOffsetY = 5;
        ctx.shadowBlur = 5;
        ctx.fillText("green shadow", 120, 60);

        ctx.save();
        ctx.textAlign = "end";
        ctx.font = "24pt 'Times New Roman'";
        ctx.globalAlpha = 0.5;
        ctx.globalCompositeOperation = "source-out";
        ctx.fillStyle = "#eee";
        ctx.shadowColor = "blue";
        ctx.shadowOffsetX = 3;
        ctx.shadowOffsetY = -1;
        ctx.shadowBlur =  0;
        ctx.fillText("blue shadow", 220, 100); // ここで消える
        ctx.restore();

        ctx.fillText("green shadow", 120, 140);
        ctx.restore();

        ctx.fillText("red shadow", 80, 180);
      }
    </script>

他にもまだあるかもしれません。

の描画結果がおかしくなっているようでしたら教えてください。 @uupaa