Fiddle Пример:
https://jsfiddle.net/j4owpexc/1/
Характеристики устройства:
Chrome 72.0.3626.105 Android 6.0.1;Nexus 7 Build / MOB30X
На этой скрипке я создаю два холста и рисую несколько кругов.Первый холст имеет ширину 115, второй - ширину 439. На большинстве устройств и браузеров круги одинаковы.В вышеприведенной версии Chrome, работающей на Android, круг в меньшем холсте (самый левый круг) отображается правильно, а круги в большем холсте (три крайних справа) отображаются странным образом.Вот скриншот с моего Nexus 7:
Линии, квадраты и т. Д. Кажутся почти одинаковыми между двумя полотнами.Теперь, если вы измените ширину второго холста на 438, он будет отображаться правильно.Фактически, любая ширина, меньшая или равная 438, будет правильно отображать круги, а любая ширина, большая или равная 439, будет неправильно их отображать.
Кто-нибудь имеет представление о том, что здесь происходит?Я уверен, что это самая последняя версия Chrome для Android.Это сводило меня с ума на некоторое время.На моем другом телефоне Android, работающем под той же версией Chrome, он отображается правильно.
<html>
<head><style>* {margin:0; padding:0;}</style></head>
<body>
</body>
</html>
<script>
var canvas1 = document.createElement("CANVAS");
canvas1.width = 115
var ctx1 = canvas1.getContext("2d");
ctx1.strokeStyle = "red";
ctx1.fillStyle = 'green';
ctx1.beginPath();
ctx1.lineWidth = 1;
ctx1.arc(60, 60, 50, 0, 2 * Math.PI);
ctx1.strokeRect(50, 50, 40, 40);
ctx1.fillRect(60, 60, 20, 20);
ctx1.moveTo(10, 10);
ctx1.lineTo(40, 40);
ctx1.lineTo(10, 80);
ctx1.stroke();
document.body.appendChild(canvas1);
var canvas2 = document.createElement("CANVAS"); // Create a <button> element
canvas2.width = 439
var ctx = canvas2.getContext("2d");
ctx.strokeStyle = "red";
ctx.fillStyle = 'green';
ctx.beginPath();
ctx.lineWidth = 1;
ctx.arc(60, 60, 50, 0, 2 * Math.PI, true);
ctx.fillRect(60, 60, 20, 20);
ctx.strokeRect(50, 50, 40, 40);
ctx.moveTo(10, 10);
ctx.lineTo(40, 40);
ctx.lineTo(10, 80);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = 1;
ctx.arc(170, 60, 50, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = 1;
ctx.arc(280, 60, 50, 0, 2 * Math.PI);
ctx.stroke();
document.body.appendChild(canvas2); // Append <button> to <body>
</script>