How to Overlay Images in the Browser with Canvas

xuanlvc — Wed, 29 Apr 2026 06:46:38 +0000

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:

Create a canvas element
Load the base image
Draw the base image onto the canvas
Load the overlay image
Draw the overlay image on top of the base image
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";

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);

The parameters mean:

drawImage(image, x, y, width, height)

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);

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;

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();

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.

DEV Community: xuanlvc

How to Overlay Images in the Browser with Canvas

How to Overlay Images in the Browser with Canvas

Common use cases

Basic idea

Controlling position and size

Adding opacity

Exporting the final image

Things to consider in a real project

When to use Canvas and when to use a tool

Final thoughts