

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

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

コード：

[code]

    <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>
[/code]

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

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

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


CC BY-SA 4.0
2015-01-29T09:30:44.897
5567
2019-12-13T18:35:01.057
2019-12-13T18:35:01.057
32986
505
question
android google-chrome html5-canvas
Android Chrome 40でのCanvasの表示崩れ