Architecture Updates

Let's cover some useful functions that we can refactor for use in later chapters:

1. Open common/js/utils.js in your editor to see the following changes.
2. We have added two additional methods, autoResizeCanvas and getShader, to utils.js that look very similar to the code we implemented earlier in this chapter:

'use strict';

// A set of utility functions for /common operations across our 
// application
const utils = {

  // Find and return a DOM element given an ID
  getCanvas(id) {
    // ...
  },

  // Given a canvas element, return the WebGL2 context
  getGLContext(canvas) {
    // ...
  },

  // Given a canvas element, expand it to the size of the window
  // and ensure that it automatically resizes as the window changes
  autoResizeCanvas(canvas) {
    const expandFullScreen = () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight...