Mastering Image Combination with JavaScript Canvas

The HTML5 <canvas> element is a powerful tool for image manipulation in front-end development. This article will show you how to use JavaScript and Canvas to allow users to upload two images, merge them into one, and save the result.

1. Create the HTML Structure

We need a simple HTML page with:

✅ Two file inputs for image uploads
✅ A <canvas> element to display the merged image
✅ A button to download the final image

html

1 <!DOCTYPE html>
2 <html lang="en">
3   <head>
4     <meta charset="UTF-8" />
5     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6     <title>Canvas Image Merger</title>
7     <style>
8       #canvas {
9         border: 1px solid #ccc;
10         display: block;
11         margin-top: 10px;
12       }
13     </style>
14   </head>
15   <body>
16     <h2>Upload Two Images to Merge</h2>
17     <input type="file" id="upload1" accept="image/*" />
18     <input type="file" id="upload2" accept="image/*" />
19     <br /><br />
20     <canvas id="canvas" width="500" height="500"></canvas>
21     <br />
22     <button id="saveButton">Save Merged Image</button>
23 
24     <script src="app.js"></script>
25   </body>
26 </html>

2. Handle Image Uploads in JavaScript

When a user selects an image, we read the file using FileReader and set it as the source for an Image object.

1 const canvas = document.getElementById("canvas");
2 const ctx = canvas.getContext("2d");
3 
4 let image1 = new Image();
5 let image2 = new Image();
6 let imagesLoaded = 0;
7 
8 function handleImageUpload(event, image) {
9   const file = event.target.files[0];
10   if (file) {
11     const reader = new FileReader();
12     reader.onload = function (e) {
13       image.src = e.target.result;
14     };
15     reader.readAsDataURL(file);
16   }
17 }
18 
19 document.getElementById("upload1").addEventListener("change", (event) => {
20   handleImageUpload(event, image1);
21 });
22 
23 document.getElementById("upload2").addEventListener("change", (event) => {
24   handleImageUpload(event, image2);
25 });

3. Draw and Merge Images on Canvas

Once both images are loaded, we draw the first image as the background and overlay the second image with 50% transparency.

1 image1.onload = () => {
2   imagesLoaded++;
3   if (imagesLoaded === 2) drawImages();
4 };
5 
6 image2.onload = () => {
7   imagesLoaded++;
8   if (imagesLoaded === 2) drawImages();
9 };
10 
11 function drawImages() {
12   ctx.clearRect(0, 0, canvas.width, canvas.height);
13   ctx.drawImage(image1, 0, 0, canvas.width, canvas.height);
14 
15   // Set transparency for the second image
16   ctx.globalAlpha = 0.5;
17   ctx.drawImage(image2, 50, 50, canvas.width - 100, canvas.height - 100);
18   ctx.globalAlpha = 1.0;
19 }

4. Save the Merged Image

Use canvas.toDataURL() to generate a downloadable PNG file.

1 document.getElementById("saveButton").onclick = saveImage;
2 
3 function saveImage() {
4   const link = document.createElement("a");
5   link.href = canvas.toDataURL("image/png");
6   link.download = "merged_image.png";
7   document.body.appendChild(link);
8   link.click();
9   document.body.removeChild(link);
10 }

5. Full Working Example

Here’s the complete code in one place:

html

1 <!DOCTYPE html>
2 <html lang="en">
3   <head>
4     <meta charset="UTF-8" />
5     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6     <title>Canvas Image Merger</title>
7     <style>
8       #canvas {
9         border: 1px solid #ccc;
10         display: block;
11         margin-top: 10px;
12       }
13     </style>
14   </head>
15   <body>
16     <h2>Upload Two Images to Merge</h2>
17     <input type="file" id="upload1" accept="image/*" />
18     <input type="file" id="upload2" accept="image/*" />
19     <br /><br />
20     <canvas id="canvas" width="500" height="500"></canvas>
21     <br />
22     <button id="saveButton">Save Merged Image</button>
23 
24     <script>
25       const canvas = document.getElementById("canvas");
26       const ctx = canvas.getContext("2d");
27 
28       let image1 = new Image();
29       let image2 = new Image();
30       let imagesLoaded = 0;
31 
32       function handleImageUpload(event, image) {
33         const file = event.target.files[0];
34         if (file) {
35           const reader = new FileReader();
36           reader.onload = function (e) {
37             image.src = e.target.result;
38           };
39           reader.readAsDataURL(file);
40         }
41       }
42 
43       document.getElementById("upload1").addEventListener("change", (event) => {
44         handleImageUpload(event, image1);
45       });
46 
47       document.getElementById("upload2").addEventListener("change", (event) => {
48         handleImageUpload(event, image2);
49       });
50 
51       image1.onload = () => {
52         imagesLoaded++;
53         if (imagesLoaded === 2) drawImages();
54       };
55 
56       image2.onload = () => {
57         imagesLoaded++;
58         if (imagesLoaded === 2) drawImages();
59       };
60 
61       function drawImages() {
62         ctx.clearRect(0, 0, canvas.width, canvas.height);
63         ctx.drawImage(image1, 0, 0, canvas.width, canvas.height);
64         ctx.globalAlpha = 0.5;
65         ctx.drawImage(image2, 50, 50, canvas.width - 100, canvas.height - 100);
66         ctx.globalAlpha = 1.0;
67       }
68 
69       document.getElementById("saveButton").onclick = saveImage;
70 
71       function saveImage() {
72         const link = document.createElement("a");
73         link.href = canvas.toDataURL("image/png");
74         link.download = "merged_image.png";
75         document.body.appendChild(link);
76         link.click();
77         document.body.removeChild(link);
78       }
79     </script>
80   </body>
81 </html>

6. Key Takeaways

✅ Users can upload two images dynamically.
✅ The second image is overlayed with 50% transparency.
✅ The merged image can be saved as a PNG file.

🎨 This is a flexible approach that allows users to combine images dynamically using JavaScript and Canvas. You can further enhance it by adding controls to adjust transparency and positioning.