Add Drop Shadows to Images Online Add customizable drop shadows with adjustable offset, blur, and color.

The tool works under the hood by utilizing the HTML5 Canvas element and its 2D drawing context, which is obtained through the getContext method. It uses the React library to manage state changes, such as updating the image, result, offset X and Y values, blur radius, and color. When an image file is dropped into the FileDropzone component, it triggers the handleFile function, which creates a URL object for the file using URL.createObjectURL and updates the image state. The processImage function then draws this image onto the Canvas element, first setting its width and height to match the natural dimensions of the uploaded image.

To apply the drop shadow effect, the tool adjusts the Canvas size by adding a padding value calculated from the maximum absolute offset X or Y value plus the blur radius and an additional 10 pixels. It then sets the shadowColor, shadowBlur, and shadowOffsetX and Y properties of the 2D drawing context before redrawing the image onto the expanded Canvas at the specified offset position. The browser handles the Gaussian blur compositing internally when drawing the image with these shadow properties set, resulting in a realistic drop shadow effect around the original image.

This implementation relies on specific browser APIs, such as the toDataURL method of the Canvas element to generate a PNG representation of the final image with the applied drop shadow. The tool also uses React hooks like useState and useCallback to efficiently manage state changes and memoize functions that depend on these states. Additionally, it employs HTML input elements for range and color selection, allowing users to customize the shadow effect according to their preferences. Upon clicking the download button, the tool creates an anchor element with a href attribute set to the resulting image data URL and simulates a click event to initiate the file download process in the browser.