JS

ADD WATERMARK TO IMAGES IN JAVASCRIPT

WATERMARK HTML

01

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

WATERMARK JAVASCRIPT (A)

02

IMAGE + CANVAS var iBack = new Image(),       iMark = "Copyright",       ctx = document.getElementById       ("demo").getContext("2d"); 

WATERMARK JAVASCRIPT (B)

03

function cmark () {   ADD BACKGROUND IMAGE   canvas.width = iBack.naturalWidth;   canvas.height = iBack.naturalHeight;   ctx.drawImage(iBack, 0, 0,   iBack.naturalWidth,  iBack.naturalHeight);

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

WATERMARK JAVASCRIPT (C)

04

GO - PROCEED WHEN IMAGE LOADED  iBack.onload = cmark; iBack.src = "eggs.jpg";