{
  "context": "This criteria evaluates how effectively the engineer uses the gl package's pixel reading capabilities, specifically the readPixels() method and related framebuffer operations. The focus is on proper usage of WebGL API methods for extracting and processing pixel data from an offscreen rendering context.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Context Creation",
      "description": "Uses the gl package's createContext() function to create a WebGL rendering context with the specified width and height dimensions",
      "max_score": 15
    },
    {
      "name": "readPixels Usage",
      "description": "Correctly uses gl.readPixels() method with appropriate parameters (x, y, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buffer) to extract pixel data from the framebuffer",
      "max_score": 30
    },
    {
      "name": "Pixel Buffer Allocation",
      "description": "Properly allocates a Uint8Array buffer of the correct size (width * height * 4 bytes) to store the pixel data before calling readPixels()",
      "max_score": 15
    },
    {
      "name": "Viewport and Rendering",
      "description": "Uses WebGL methods (gl.viewport(), gl.clearColor(), gl.clear()) to properly set up the rendering context and render the colored rectangle",
      "max_score": 15
    },
    {
      "name": "Pixel Data Processing",
      "description": "Correctly processes the RGBA pixel data from the buffer to calculate average color values, converting from 0-255 range appropriately",
      "max_score": 15
    },
    {
      "name": "Return Value Structure",
      "description": "Returns an object with the correct structure containing width, height, pixels (Uint8Array), and averageColor ({r, g, b, a}) as specified",
      "max_score": 10
    }
  ]
}