canvas-color-tracker

import ColorTracker from 'canvas-color-tracker'; // Assume a canvas context is available for pixel data const canvas = document.createElement('canvas'); canvas.width = 800; canvas.height = 600; const context = canvas.getContext('2d', { willReadFrequently: true }); const shadowCanvas = document.createElement('canvas'); shadowCanvas.width = canvas.width; shadowCanvas.height = canvas.height; const shadowCtx = shadowCanvas.getContext('2d', { willReadFrequently: true }); // Create a new ColorTracker instance // Default checksum_bits (6) allows ~262k objects. Use `new ColorTracker(4)` for ~1M objects. const myTracker = new ColorTracker(); // Register an object and get its unique color key const myObject = { id: 1, name: 'Red Square', x: 50, y: 50, size: 20 }; const myObjectColor = myTracker.register(myObject); if (myObjectColor) { // Draw the actual object on the main canvas context.fillStyle = 'red'; context.fillRect(myObject.x, myObject.y, myObject.size, myObject.size); // Draw the object with its unique shadow color on the hidden shadow canvas shadowCtx.fillStyle = myObjectColor; shadowCtx.fillRect(myObject.x, myObject.y, myObject.size, myObject.size); } // Simulate a mouse hover event const hoverX = 55; // Inside the red square const hoverY = 55; // Get the pixel color from the shadow canvas at the hover position const pixel = shadowCtx.getImageData(hoverX, hoverY, 1, 1).data; // Returns a Uint8ClampedArray: [r, g, b, a] const hoverColor = [pixel[0], pixel[1], pixel[2]]; // Only RGB is used for lookup // Look up the object using the color data const hoveredObject = myTracker.lookup(hoverColor); if (hoveredObject) { console.log('Hovered over:', hoveredObject.name); // Expected: Hovered over: Red Square } else { console.log('No object found at this position.'); } // Example of registry full scenario (highly simplified, usually needs many registrations) // For demonstration, let's assume we force it to be full or hit null return // myTracker.register(someObject) could return null if capacity exceeded.