3

Canvasの2D描画でfill()とstroke()が混在している場合、特定のAndroid端末のChromeで表示が崩れます。

具体的には、異なる2つの形状をそれぞれfillおよびstrokeで描画すると、最初に描画した形状が2つ描画されます。(つまり後に描画したものが間違って描画される。)

コード:

<head>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
    var ctx = document.getElementById('canvas').getContext('2d');

    ctx.beginPath();
    ctx.moveTo(545.0550004839897, 104.71500009298325);
    ctx.quadraticCurveTo(587.0752505213022, 98.00250008702278, 630.7065005600452, 162.44250014424324);
    ctx.quadraticCurveTo(652.4550005793571, 194.66250017285347, 665.8800005912781, 228.2250002026558);
    ctx.lineTo(843.0900007486343, 228.2250002026558);
    ctx.quadraticCurveTo(740.7915006577969, 422.88750037550926, 597.815250530839, 467.1900004148483);
    ctx.quadraticCurveTo(553.1100004911423, 481.0177504271269, 509.7472504526377, 478.0642504245043);
    ctx.lineTo(484.3740004301071, 474.70800042152405);
    ctx.lineTo(475.2450004220009, 472.4257504194975);
    ctx.quadraticCurveTo(346.09650030732155, 474.1710004210472, 235.34025020897388, 340.59225030243397);
    ctx.quadraticCurveTo(200.7037501782179, 298.8405002653599, 172.1085001528263, 248.6310002207756);
    ctx.lineTo(150.3600001335144, 206.7450001835823);
    ctx.lineTo(416.1750003695488, 217.48500019311905);
    ctx.quadraticCurveTo(418.7257503718138, 212.5177501887083, 427.9890003800392, 199.09275017678738);
    ctx.quadraticCurveTo(441.41400039196014, 179.76075015962124, 456.4500004053116, 163.1137501448393);
    ctx.quadraticCurveTo(502.7662504464388, 111.42750009894371, 545.0550004839897, 104.71500009298325);
    ctx.fillStyle = "rgba(0,0,255,1)";
    ctx.fill();

    ctx.beginPath();
    ctx.moveTo(357.1050003170967, 566.400750502944);
    ctx.lineTo(545.0550004839897, 982.4415008723736);
    ctx.lineTo(601.4400005340576, 821.4757507294416);
    ctx.lineTo(733.0050006508827, 990.2915008962154);
    ctx.lineTo(641.7150005698204, 544.9207504838705);
    ctx.lineTo(826.9800007343292, 730.1857506483793);
    ctx.lineTo(904.8450008034706, 673.8007505983114);
    ctx.lineWidth = 10.740000009536743;
    ctx.lineCap = "round";
    ctx.lineJoin = "round";
    ctx.strokeStyle = "rgba(255,0,0,1)";
    ctx.stroke();

    }, false);
    </script>
</head>
<body>
  <canvas id="canvas" width="1000" height="1000"></canvas>
</body>

Chromeのバージョン:
Chrome for Android 40.0.2214.89

不具合を確認した端末:
・DIGNO DUAL2 WX10K (Android4.2.2)
・URBANO L01 KYY21 (Android4.2.2)

回避方法をご存知の方はいらっしゃいますでしょうか?

3
  • 暇人の戯言です。再現できてないので、思いつきですがctx.fill()の前にctx.closePath();を付けるとどうなりますか? 2015年1月29日 13:12
  • 提案いただいた方法で試しましたが解決しませんんでした。本件、シンプルな形状だと発生しないことから、すべてのfill/strokeを小分けに行うか、もしくは chrome://flags から "Disable accelerated 2D canvas"を設定することで回避できます。 code.google.com/p/chromium/issues/detail?id=453283
    – kuu
    2015年2月4日 4:22
  • お力になれず、適当なことを申し上げてすみません。自分には全く縁がないと存じますが、今後同様な事象がchromeで発生した時バグレポートの上げ方など参照したく存じます。 2015年2月4日 5:50

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。