DEV Community

xuanlvc
xuanlvc

Posted on

How to Overlay Images in the Browser with Canvas

#webdev #javascript #canvas #tools

How to Overlay Images in the Browser with Canvas

Overlaying one image on top of another is a common task in web development.

You might need it when building a watermark tool, a simple image editor, a product preview feature, or a quick design workflow where users can place a logo, sticker, or transparent PNG on top of a base image.

In this post, I’ll walk through a simple way to overlay images in the browser using the Canvas API.

Common use cases

Image overlay is useful in many small but practical scenarios:

  • Adding a watermark to an image
  • Placing a logo on a product mockup
  • Combining a transparent PNG with a background image
  • Creating simple social media graphics
  • Previewing how one image looks on top of another
  • Building lightweight browser-based image editing tools

If you want to build this feature into your own web app, Canvas is a good starting point.

Basic idea

The core idea is simple:

  1. Create a canvas element
  2. Load the base image
  3. Draw the base image onto the canvas
  4. Load the overlay image
  5. Draw the overlay image on top of the base image
  6. Export the final result if needed

Here is a minimal example.

// path: examples/overlay-canvas.js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const baseImage = new Image();
const overlayImage = new Image();

baseImage.crossOrigin = "anonymous";
overlayImage.crossOrigin = "anonymous";

baseImage.onload = () => {
  canvas.width = baseImage.width;
  canvas.height = baseImage.height;

  ctx.drawImage(baseImage, 0, 0);

  overlayImage.onload = () => {
    const overlayWidth = 240;
    const overlayHeight = 240;
    const x = 80;
    const y = 80;

    ctx.drawImage(overlayImage, x, y, overlayWidth, overlayHeight);
  };

  overlayImage.src = "overlay.png";
};

baseImage.src = "base.jpg";
Enter fullscreen mode Exit fullscreen mode

This draws the base image first, then places the overlay image above it.

Controlling position and size

The most important part is this line:

// path: examples/draw-overlay.js
ctx.drawImage(overlayImage, x, y, overlayWidth, overlayHeight);
Enter fullscreen mode Exit fullscreen mode

The parameters mean:

drawImage(image, x, y, width, height)
Enter fullscreen mode Exit fullscreen mode

So if you want to move the overlay image, change x and y.

If you want to resize the overlay image, change overlayWidth and overlayHeight.

For example:

// path: examples/overlay-position.js
const x = 120;
const y = 60;
const overlayWidth = 300;
const overlayHeight = 180;

ctx.drawImage(overlayImage, x, y, overlayWidth, overlayHeight);
Enter fullscreen mode Exit fullscreen mode

Adding opacity

Sometimes the overlay should be semi-transparent, especially for watermarks.

You can use globalAlpha before drawing the overlay image:

// path: examples/overlay-opacity.js
ctx.globalAlpha = 0.5;
ctx.drawImage(overlayImage, x, y, overlayWidth, overlayHeight);
ctx.globalAlpha = 1;
Enter fullscreen mode Exit fullscreen mode

This makes the overlay image 50% transparent.

Remember to reset globalAlpha back to 1 after drawing, otherwise anything drawn later will also be transparent.

Exporting the final image

After drawing both images, you can export the canvas as a PNG:

// path: examples/export-canvas.js
const dataUrl = canvas.toDataURL("image/png");

const link = document.createElement("a");
link.href = dataUrl;
link.download = "overlay-result.png";
link.click();
Enter fullscreen mode Exit fullscreen mode

This lets the user download the final combined image.

Things to consider in a real project

The basic Canvas logic is not difficult, but a production-ready image overlay feature usually needs more work.

You may need to handle:

  • Image upload
  • Drag and drop positioning
  • Resizing controls
  • Touch support for mobile users
  • Layer ordering
  • Opacity controls
  • Export quality
  • Different image formats
  • Large image performance
  • Cross-origin image issues

For small tools, this can quickly become more UI work than expected.

When to use Canvas and when to use a tool

Canvas is a great choice when you need full control or want to integrate image editing directly into your own product.

For example, use Canvas if you are building:

  • A custom editor
  • A watermark generator
  • A product preview tool
  • A browser-based design feature
  • An automated image processing workflow

However, if you only need to quickly combine two images, preview a transparent PNG, or place a logo over a background, using a lightweight online tool may be faster. For example, this image overlay tool is useful for quick manual overlay tasks when you do not want to build the full UI yourself.

Final thoughts

The Canvas API makes it possible to overlay images directly in the browser without a backend.

For developers, it is flexible and powerful. You can control image position, size, opacity, export format, and more.

For quick manual image overlay tasks, an online tool can save time. For product features, Canvas gives you the flexibility to build exactly what you need.

Top comments (0)