У меня есть Javascript, который создает линейный градиент для элемента canvas и устанавливает некоторые цветовые остановки.
Скрипт работает как положено в Chrome и Firefox, но дает мне " SyntaxError "в Edge (а также IE).
Ошибка появляется во время выполнения, что для меня означает, что мой сценарий синтаксически корректен, но, возможно, есть ошибка в базовой реализации (в данном случае это функция градиента setColorStop, но это только предположение).
Вот урезанная версия:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function loader() {
var ctx = document.getElementById("canvas1").getContext('2d');
var left = 0;
var right = 199;
var gradient = ctx.createLinearGradient(left, 0, right, 0);
var a = 20 ;
var b = 2 ;
var c = "#17a2b8" ;
var d = "#80808080" ;
console.log( a,b,c,d ) ;
gradient.addColorStop( 0, c ) ;
console.log( "done 1" ) ;
gradient.addColorStop( ( a - ( b - 1 ) ) / a, c ) ;
console.log( "done 2" ) ;
gradient.addColorStop( ( a - ( b - 1 ) ) / a, d ) ; // <== SyntaxError here!
console.log( "done 3" ) ;
gradient.addColorStop( 1, d );
console.log( "done 4" ) ;
}
</script>
</head>
<body onload="loader()">
<canvas id="canvas1" sytle="width:200px;height:200px"></canvas>
</body>
</html>
Это вывод консоли из Edge:
... и из Chrome (для сравнения):
Мой вопрос: почему это происходит, и как я могу обойти это проблема