title: [Safari/Chrome fatal Bug]HTML5 canvas not works for a specific case but Firefox does well
body: <p>I use html5 canvas to build a function-graph software.
  There is a critical bug but I don't know what is going on.</p>
  
  <p>That is, when I call:</p>
  
  <pre><code>yOFxGraph(plotFUNCinputYofX,-4,5,-4,4,"rgb(66,44,255)",1);
  </code></pre>
  
  <p>everything works good in Firefox26/Chrome32/Safari7 on Mac.</p>
  
  <p>However, when I change <strong>only one</strong> tiny parameter like:</p>
  
  <pre><code>yOFxGraph(plotFUNCinputYofX,-5,5,-4,4,"rgb(66,44,255)",1);
  </code></pre>
  
  <p>the <strong>graph</strong> just <strong>disappears in Chrome/Safari</strong> but still <strong>works good in Firefox</strong>.</p>
  
  <p>The entire code is below, could you please tell me how to solve it? Thank you very much. 
  How could this bug just happen to major browsers!? regardless the code is so simple.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;body onload="draw()"&gt;
      &lt;script&gt;
      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&lt;xTo){while(xx&lt;xTo){pivoting()}}
          else if(xFrom&gt;xTo){while(xx&gt;xTo){pivoting()}}
          ctx.stroke();
      }
      &lt;/script&gt;
      &lt;canvas id="canvas" width="500" height="500"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>