Create Sprite Sheets Online Combine multiple images into a single sprite sheet with configurable columns and spacing.

The tool uses React to manage state and handle user interactions, such as uploading images and generating the sprite sheet. When an image is uploaded, it creates a URL object using `URL.createObjectURL` and stores the image data in the component's state. The `generate` function is called when the user clicks the "Generate Sprite Sheet" button, which initializes a new canvas element using `canvasRef.current` and gets the 2D drawing context using `getContext('2d')`. It then loads each image using the `Image` constructor and draws it on the canvas at its computed grid position.

The grid positions are calculated based on the number of columns and rows, which are determined by the user's input. The row count is calculated as the ceiling of the image count divided by the column count, ensuring that all images fit within the grid. The canvas dimensions are computed from the maximum width per column and total row height plus padding, taking into account the user's desired level of spacing between sprites. Each image is drawn at its computed grid position using `drawImage`, and the CSS coordinates are generated as negative background-position values for each sprite.

The tool uses JavaScript's built-in `Math.min` and `Math.ceil` functions to calculate the optimal canvas dimensions and row count, ensuring that the sprite sheet is generated efficiently. The resulting sprite sheet is stored in the component's state as a PNG image data URL, which can be downloaded by the user or used directly in their web project. The corresponding CSS code is generated using template literals, with each sprite's background-position coordinates calculated based on its position within the grid. The `copyCSS` function uses the `navigator.clipboard.writeText` API to copy the generated CSS code to the user's clipboard, making it easy to integrate into their project.