JS

WATERMARK IMAGES IN JAVASCRIPT

(quick guide & examples)

WATERMARK HTML

01

JUST AN EMPTY CANVAS <canvas id="demo"></canvas>

WATERMARK JAVASCRIPT (A)

02

IMAGE + WATERMARK + CANVAS var img = new Image(),       wm = "Copyright",       canvas = document.getElementById                      ("demo"),       ctx = canvas.getContext("2d"); 

WATERMARK JAVASCRIPT (B)

03

img.onload = () => {   ADD SOURCE IMAGE   canvas.width = img.naturalWidth;   canvas.height = img.naturalHeight;   ctx.drawImage(img, 0, 0,   img.naturalWidth, img.naturalHeight);

GO img.src = "SOURCE.WEBP";

  ADD WATERMARK   ctx.font = "bold 24px Arial";   ctx.fillStyle = "rgba(255, 0, 0, 0.5)";   ctx.fillText(wm,10, 30); };