Fix bugs in saveGif for WebGL2 contexts

[davepagurek]

Resolves #6200

Changes

• Uses a more futureproof method of detecting a WebGL sketch that will work regardless of the WebGL version
• Moves p out of an if statement to avoid errors accessing the variable

Screenshots of the change

I ran into this when trying to export a gif that uses framebuffers from the main branch. Here's the gif I exported after making these changes 🙂

let prev, next;
function setup() {
  createCanvas(200, 200, WEBGL)
  prev = createFramebuffer({ format: FLOAT });
  next = createFramebuffer({ format: FLOAT });
}

function draw() {
  // Swap prev and next
  [prev, next] = [next, prev];
  
  imageMode(CENTER);
  
  next.begin();
  clear();
  push()
  tint(255, 250)
  rotate(0.01)
  scale(0.99)
  image(prev, 0, 0)
  pop()
  translate(sin(frameCount*0.1)*50, sin(frameCount*0.11)*50)
  noStroke()
  normalMaterial()
  sphere(25)
  next.end();
  
  background(255);
  image(next, 0, 0);
}

function keyPressed() {
  saveGif('feedback.gif', 5)
}

PR Checklist

• npm run lint passes
• Inline documentation is included / updated
• Unit tests are included / updated