Geek Answers Handbook

[Safari / Chrome fatal Bug] HTML5 canvas doesn't work for a specific case, but Firefox does a great job

I am using html5 canvas to create graph function software. There is a critical error, but I do not know what is happening.

That is, when I call:

yOFxGraph(plotFUNCinputYofX,-4,5,-4,4,"rgb(66,44,255)",1);

everything works well on Firefox26 / Chrome32 / Safari7 on Mac.

However, when I change only one tiny parameter, for example:

yOFxGraph(plotFUNCinputYofX,-5,5,-4,4,"rgb(66,44,255)",1);

the graph only disappears in Chrome / Safari , but works well in Firefox .

All the code below, could you tell me how to solve it? Many thanks. How can this error happen with major browsers !? no matter which code is so simple.

<!doctype html>
<html>
<body onload="draw()">
    <script>
    function plotFUNCinputYofX(x) {return 1/Math.sin(x);}

    function draw() {
       yOFxGraph(plotFUNCinputYofX,-4,5,-4,4,"rgb(66,44,255)",1);
    }

    function yOFxGraph (func,xFrom,xTo,yFrom,yTo,color,thick) {
        var canvas = document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        ctx.lineWidth = thick;
        ctx.strokeStyle = color;

        var Xunit = canvas.width/(xTo-xFrom);
        var Yunit = canvas.height/(yTo-yFrom);
        var samplingX=(xTo-xFrom)/400;/*I only sample 400 points whatever the scale is.*/
        var xx = xFrom;
        ctx.beginPath();
        ctx.moveTo(0 , canvas.height-(func(xx)-yFrom)*Yunit);

        function pivoting(){
            xx+=samplingX;
            ctx.lineTo((xx-xFrom)*Xunit , canvas.height-(func(xx)-yFrom)*Yunit);
        }
        if(xFrom<xTo){while(xx<xTo){pivoting()}}
        else if(xFrom>xTo){while(xx>xTo){pivoting()}}
        ctx.stroke();
    }
    </script>
    <canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
+4
2

, , (, , ) .

-, , , -5 5, x = 0, 1/sin(0), Infinity ( , ).

FireFox, , . , , , , , , ( , NaNs).

Chrome Safari , .

, . , : ( )

var yy = func(xx);
if(!(yy>yFrom))yy=yFrom;
if(!(yy<yTo))yy=yTo;
ctx.lineTo((xx-xFrom)*Xunit , canvas.height-(yy-yFrom)*Yunit);

, , Chrome. , Safari.

+2

, , , , :

/*Safari7 & Chrome32 canvas bug*/
var Y=canvas.height-(func(xx)-yFrom)*Yunit;
if(0<=Y&&Y<=canvas.height){ctx.moveTo(0 , Y);}
else if(Y>canvas.height){Y=canvas.height+1;ctx.moveTo(0 , Y);}
else if(Y<0){Y=-1;ctx.moveTo(0 , Y);}
/*Safari7 & Chrome32 canvas bug*/
function pivoting(){
    xx+=samplingX;
    /*Safari7 & Chrome32 canvas bug*/
    Y=canvas.height-(func(xx)-yFrom)*Yunit;
    if(0<=Y&&Y<=canvas.height){ctx.lineTo((xx-xFrom)*Xunit , Y);}
    else if(Y>canvas.height){Y=canvas.height+1;ctx.lineTo((xx-xFrom)*Xunit , Y);}
    else if(Y<0){Y=-1;ctx.lineTo((xx-xFrom)*Xunit , Y);}
    /*Safari7 & Chrome32 canvas bug*/
}

!

, .

0

More articles:


All Articles