Multi-Region Renderer

Build a headless rendering utility that can render different colored rectangles to specific regions of a canvas, with support for clipping regions.

Requirements

Your implementation should support rendering to multiple independent rectangular regions on a single canvas. Each region should be able to have its own content rendered independently, and content should not bleed outside region boundaries.

Implement the following functionality:

1. Canvas Setup: Create a 800x600 pixel rendering surface
2. Region Rendering: Support rendering to specific rectangular regions defined by:
   • X and Y coordinates (top-left corner position)
   • Width and height dimensions
3. Region Isolation: Ensure that rendering operations only affect pixels within the specified region
4. Clear Operations: Support clearing specific regions to a given color without affecting other regions
5. Pixel Extraction: Provide a way to extract the final rendered pixels as a buffer

Test Cases

Your implementation should satisfy the following test cases:

• Given a 800x600 canvas, when clearing the entire canvas to red (RGB: 255, 0, 0), then all pixels should be red @test

• Given a 800x600 canvas, when rendering to region (100, 100, 200, 150) with green color (RGB: 0, 255, 0) and the rest with blue (RGB: 0, 0, 255), then pixels at (150, 150) should be green and pixels at (50, 50) should be blue @test

• Given a 800x600 canvas with three non-overlapping regions: region A (0, 0, 200, 200) cleared to red, region B (200, 0, 200, 200) cleared to green, and region C (400, 0, 200, 200) cleared to blue, then sampling pixels from each region should return the correct colors @test

• Given a canvas where region (50, 50, 100, 100) is active, when clearing to white (RGB: 255, 255, 255), then only pixels within (50, 50, 100, 100) should be white and pixels outside should remain unchanged @test

Implementation

@generates

API

/**
 * Creates a new multi-region renderer
 * @param {number} width - Canvas width in pixels
 * @param {number} height - Canvas height in pixels
 * @returns {object} Renderer instance
 */
function createRenderer(width, height) {
  // IMPLEMENTATION HERE
}

/**
 * Sets the active rendering region
 * @param {object} renderer - The renderer instance
 * @param {number} x - Region x coordinate (left)
 * @param {number} y - Region y coordinate (top)
 * @param {number} width - Region width
 * @param {number} height - Region height
 */
function setRegion(renderer, x, y, width, height) {
  // IMPLEMENTATION HERE
}

/**
 * Clears the current region to the specified color
 * @param {object} renderer - The renderer instance
 * @param {number} r - Red component (0-255)
 * @param {number} g - Green component (0-255)
 * @param {number} b - Blue component (0-255)
 * @param {number} a - Alpha component (0-255)
 */
function clearRegion(renderer, r, g, b, a) {
  // IMPLEMENTATION HERE
}

/**
 * Retrieves pixel data from the canvas
 * @param {object} renderer - The renderer instance
 * @returns {Uint8Array} Pixel data in RGBA format
 */
function getPixels(renderer) {
  // IMPLEMENTATION HERE
}

/**
 * Cleans up renderer resources
 * @param {object} renderer - The renderer instance
 */
function destroyRenderer(renderer) {
  // IMPLEMENTATION HERE
}

module.exports = {
  createRenderer,
  setRegion,
  clearRegion,
  getPixels,
  destroyRenderer
};

Dependencies { .dependencies }

gl { .dependency }

Provides headless WebGL rendering capabilities.