title: HTML5 Canvas + JS Not Working on IOS/Safari
body: <p>I've implemented a canvas element with a javascript particle effect. The effect is working on every browser but IOS/Safari. I've done a bit of research and IOS/Safari supports HTML5/Canvas: <a href="http://caniuse.com/#feat=canvas" rel="nofollow noreferrer">According to Browser Support Charts for HTML5/Canvas</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    var WIDTH = window.innerWidth * .9,
      HEIGHT = window.innerHeight,
      MAX_PARTICLES = 100,
      DRAW_INTERVAL = 60,
      canvas = document.querySelector('#pixies'),
      context = canvas.getContext('2d'),
      gradient = null,
      pixies = new Array();
  
    function setDimensions() { 
      WIDTH = window.outerWidth;
      HEIGHT = window.innerHeight;
      canvas.width = WIDTH; 
      canvas.height = HEIGHT; 
    }
  
    setDimensions();
    window.addEventListener('resize', setDimensions);
  
    function Circle() {
      this.settings = {ttl:8000, xmax:5, ymax:2, rmax:10, rt:1, xdef:960, ydef:540, xdrift:4, ydrift: 4, random:true, blink:true};
  
      this.reset = function() {
        this.x = (this.settings.random ? WIDTH*Math.random() : this.settings.xdef);
        this.y = (this.settings.random ? HEIGHT*Math.random() : this.settings.ydef);
        this.r = ((this.settings.rmax-1)*Math.random()) + 1;
        this.dx = (Math.random()*this.settings.xmax) * (Math.random() &lt; .5 ? -1 : 1);
        this.dy = (Math.random()*this.settings.ymax) * (Math.random() &lt; .5 ? -1 : 1);
        this.hl = (this.settings.ttl/DRAW_INTERVAL)*(this.r/this.settings.rmax);
        this.rt = Math.random()*this.hl;
        this.settings.rt = Math.random()+1;
        this.stop = Math.random()*.2+.4;
        this.settings.xdrift *= Math.random() * (Math.random() &lt; .5 ? -1 : 1);
        this.settings.ydrift *= Math.random() * (Math.random() &lt; .5 ? -1 : 1);
      }
  
      this.fade = function() {
        this.rt += this.settings.rt;
      }
  
      this.draw = function() {
        if(this.settings.blink &amp;&amp; (this.rt &lt;= 0 || this.rt &gt;= this.hl)) {
            this.settings.rt = this.settings.rt*-1;
        } else if(this.rt &gt;= this.hl) {
            this.reset();
        }
  
        var newo = 1-(this.rt/this.hl);
        context.beginPath();
        context.arc(this.x, this.y, this.r, 0, Math.PI*2, true);
        context.closePath();
  
        var cr = this.r*newo;
        gradient = context.createRadialGradient(this.x, this.y, 0, this.x, this.y, (cr &lt;= 0 ? 1 : cr));
        gradient.addColorStop(0.0, 'rgba(255,255,255,'+newo+')');
        gradient.addColorStop(this.stop, 'rgba(255,255,255,'+(newo*.6)+')');
        gradient.addColorStop(1.0, 'rgba(255,255,255,0)');
        context.fillStyle = gradient;
        context.fill();
      }
  
      this.move = function() {
        this.x += (this.rt/this.hl)*this.dx;
        this.y += (this.rt/this.hl)*this.dy;
        if(this.x &gt; WIDTH || this.x &lt; 0) this.dx *= -1;
        if(this.y &gt; HEIGHT || this.y &lt; 0) this.dy *= -1;
      }
  
      this.getX = function() { return this.x; }
      this.getY = function() { return this.y; }
    }
  
    for (var i = 0; i &lt; MAX_PARTICLES; i++) {
      pixies.push(new Circle());
      pixies[i].reset();
    }
  
    function draw() {
      context.clearRect(0, 0, WIDTH, HEIGHT);
      for(var i = 0; i &lt; pixies.length; i++) {
        pixies[i].fade();
        pixies[i].move();
        pixies[i].draw();
      }
    }
  
    setInterval(draw, DRAW_INTERVAL);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#particles {
    position: absolute;
    background: navy;
    width: 200px;
    height: 200px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="particles"&gt;
     &lt;canvas id="pixies"&gt;&lt;/canvas&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any ideas why this isn't working in IOS/Safari? The actual site in question is this one: <a href="http://www.pjmaskslive.com" rel="nofollow noreferrer">www.pjmaskslive.com</a></p>