CODEWITHSUNDEEP
javascripthexmicrosoft-edge
miasbeck
miasbeck

Reputation: 1046

SyntaxError in Microsoft Edge Javascript

I have a Javascript that creates a Linear Gradient for a canvas-element and sets some color stops.

The script workѕ as expected in Chrome and Firefox, but gives me a "SyntaxError" in Edge (and also IE).

The error appears at runtime, which, to me, means that my script is syntactically correct, but there's perhaps an error in the underlying implementation (gradient's setColorStop-function in this case, but that's only a guess).

Here's a stripped down version:

<!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>

This is the console output from Edge:

Console output from Edge

... and from Chrome (for comparison):

Console output from Chrom

My Question: Why does this happen, and how can I possible work around this problem?

Upvotes: 2

Views: 159

Answers (1)

Anurag Srivastava
Anurag Srivastava

Reputation: 14413

It is most probably due to #rrggbbaa hex color notation (var d = "#80808080";) which is not supported in some versions of Edge.

Either update it or use rgba(255, 255, 255, 1) notation

Upvotes: 2

Related Questions