HTML5::Canvas.clip を Google Chrome で使用するとジャギーが発生する

js canvas 問題

uuAltCSS.js ver 0.2 の開発中です。

.bg {
  -uu-box-shadow: white 1px 1px 20px;
  -uu-background: url(../../img/grad1.png) skyblue repeat-x left bottom;
}
.radius {
  -uu-border-radius: 40px;
}
.border {
  border: 10px solid black;
}

とした場合に、Google Chrome3 でこのようなジャギーが発生します。

ボーダーの内側を描画する際に canvas の clip メソッドを利用していますが、Safari4 では canvas の clip メソッドで アンチエリアスがかかり、Chrome ではかからないようです。

右下に 3px ずらして描画してみた図


がんばれ Chrome チーム

追記

クリッピングエリアを上下左右に +1px することで、ブラウザの差分を吸収しました。


コード的には、こんな感じになります。

function drawMultipleBackgroundImage(bfx, ctx) {
  ...
    if (!_ie || bfx.slmode) {
/*
      boxpath(ctx,
              _ie67 ? bfx.border.l : 0,
              _ie67 ? bfx.border.t : 0,
              bfx.nodeRect.ow - bfx.border.l - bfx.border.r,
              bfx.nodeRect.oh - bfx.border.t - bfx.border.b,
              bfx.bradius.r);
 */
      boxpath(ctx,
              _ie67 ? bfx.border.l : -1,
              _ie67 ? bfx.border.t : -1,
              bfx.nodeRect.ow - bfx.border.l - bfx.border.r + 2,
              bfx.nodeRect.oh - bfx.border.t - bfx.border.b + 2,
              bfx.bradius.r);

      ctx.clip();
    }
 ...
}


このページをバグ報告しておきました。