Ошибка Android Chrome HTML Canvas Arc
Пример скрипки:
https://jsfiddle.net/j4owpexc/1/
Характеристики устройства:
Хром 72.0.3626.105 Андроид 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>
И FWIW, у меня нет репро для Galaxy S6.
Я только что протестировал его в Firefox на том же планшете, и он правильно отобразился там, поэтому, должно быть, это проблема с Chrome. Я напишу отчет об ошибке. Спасибо за ваши комментарии.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Похоже на проблему сглаживания, когда сглаживание сработает, но пиксели, которые должны были быть полупрозрачными (или ниже заданной непрозрачности), отбрасываются. Напишите отчет об ошибке команде chromium после тестирования в другом браузере с того же устройства.