How To Draw Watermark In Html5 Canvas With Dynamic Rotation Value?

I am working in HTML5 and i am trying to draw a watermark on image using text. I have following code:

Solution 1:

Here is some improved code:

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 Comic Sans MS" ;
wmContext.fillStyle = "red";
// get the metrics with font settingsvar metrics = wmContext.measureText("WaterMark Demo");
var width = metrics.width;
// height is font sizevar 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("WaterMark Demo",-width/2,height/2);

Working at: http://jsfiddle.net/EAXc9/7/

Heavily inspired by: https://stackoverflow.com/a/5400970/2249185

Share