Watermark using Canvas & Javascript
Just found out that we can actually add a watermark to any image using HTML <canvas> & Javascript. This should be a piece of cake if you're familiar with HTML and Javascript So how do we do it? 1st create a <canvas> element in your HTML file <canvas id="myCanvas">Your browser doesn't support canvas</canvas> Then use Javascript to load image into the canvas var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); After that you can add the watermark using this script ctx.font = "30px Arial"; ctx.fillText("watermark", 10, 10); Now if you check browser, you'll find the image is watermarked by a text that we put in the Javascript code Result References https://www.w3schools.com/graphics/canvas_images.asp https://www.w3schools.com/graphics/canvas_text.asp