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)
回避方法をご存知の方はいらっしゃいますでしょうか?