How the Asset Works

1. Image Selection

   • The user selects a main image and a watermark image (logo).

   • Images are loaded using the JavaScript FileReader or Image() object.

2. Canvas Rendering

   • The main image is drawn onto an HTML <canvas> element.

   • The canvas automatically adjusts its width and height to match the main image dimensions to preserve quality.

3. Watermark Application

   • The watermark (logo or text) is drawn on top of the main image using drawImage() or fillText().

   • Supports:

     • Custom position (top-left, top-right, bottom-left, bottom-right, center)

     • Opacity control using globalAlpha

     • Scaling relative to the main image

     • Padding / margins

     • Rotation (optional)

4. Final Image Output

   • The watermarked image is exported from the canvas using:

     • canvas.toDataURL() ? Base64 output