Watermark for Reports

Injects a watermark onto a dom element

by Evan Chavez

HTML

<div id="pageContainer" style="width: 612px; height: 792px;">
             <canvas id="page1" width="612" height="792">
                  //image loading canva
             </canvas>
        </div>

JavaScript

var container=document.getElementById("pageContainer")
var origCanvas=document.getElementById("page1");
var wmCanvas=document.createElement("canvas");
wmCanvas.id="watermark";
wmCanvas.width=origCanvas.width;
wmCanvas.height=origCanvas.height;
wmCanvas.setAttribute("style","position:absolute;border:1px solid black")

if(container.firstChild)
    container.insertBefore(wmCanvas, container.firstChild);
else
    container.appendChild(wmCanvas);

var wmContext=wmCanvas.getContext('2d');
wmContext.globalAlpha=0.5;
// setup text for filling
wmContext.font = "72px Ariel" ;
wmContext.fillStyle = "red";
// get the metrics with font settings
var metrics = wmContext.measureText("Closed");
var width = metrics.width;
// height is font size
var height = 72;

// change the origin coordinate to the middle of the context
wmContext.translate(origCanvas.width/2, origCanvas.height/2);
// rotate the context (so it's rotated around its center)
wmContext.rotate(-Math.atan(origCanvas.height/origCanvas.width));
// as the origin is now at the center, just need to center the text
wmContext.fillText("Closed",-width/2,height/2);