Grid of images/pixels on a webpage

script seems to be edited out by boards. heres something else

Key Points:<canvas> Element: Defines an area in the HTML where graphics can be drawn. In this case, we
set a 100x100 pixel canvas.JavaScript Drawing Context (2d): Obtained using getContext('2d'), this
context provides methods for drawing shapes, text, images, and other objects directly onto the
canvas.Pixel Manipulation:createImageData(): Creates a new, blank ImageData object.putImageData():
Draws an ImageData object at a specific location on the canvas.getImageData(): Retrieves pixel data
from the canvas (useful for reading pixel values).Advantages of Using <canvas>:High Performance: Unlike
tables or image grids, the <canvas> element is hardware-accelerated in modern browsers.Dynamic Updates:
Easily update individual pixels or entire regions without re-rendering the whole canvas.Low Memory
Overhead: Much more efficient in terms of memory compared to creating a DOM element for each
pixel.Powerful APIs: Provides a rich set of APIs for drawing shapes, applying transformations, handling
events, etc.Conclusion:Using the <canvas> element with JavaScript is a modern and efficient approach to
creating a dynamic, pixel-addressable HTML page. It provides greater flexibility and performance
compared to older methods like tables or grids of images.

heres the JS without the tags

    // JavaScript to manipulate pixels

    const canvas = document.getElementById('pixelCanvas');

    const ctx = canvas.getContext('2d');


    // Fill the canvas with black pixels

    ctx.fillStyle = 'black';

    ctx.fillRect(0, 0, canvas.width, canvas.height);


    // Function to set the color of a single pixel

    function setPixel(x, y, r, g, b, a) {

        const imageData = ctx.createImageData(1, 1); // Create a 1x1 pixel ImageData object

        const data = imageData.data;


        // Set RGBA values

        data[0] = r;   // Red

        data[1] = g;   // Green

        data[2] = b;   // Blue

        data[3] = a;   // Alpha (opacity)


        // Draw the pixel on the canvas at the specified coordinates

        ctx.putImageData(imageData, x, y);

    }


    // Example: Set a red pixel at (10, 10)

    setPixel(10, 10, 255, 0, 0, 255);


    // Example: Randomize pixel colors for the entire canvas

    function randomizePixels() {

        for (let x = 0; x < canvas.width; x++) {

            for (let y = 0; y < canvas.height; y++) {

                setPixel(x, y, Math.random() * 255, Math.random() * 255, Math.random() * 255, 255);

            }

        }

    }


    // Call the randomizePixels function

    randomizePixels();