Как нарисовать водяной знак в HTML5 Canvas с динамическим значением вращения? ⇐ Html

[Anonymous]

Я работаю в HTML5 и пытаюсь нарисовать водяной знак на изображении с помощью текста.
У меня есть следующий код:

Код: Выделить всё

 //image loading canvas

JavaScript

Код: Выделить всё

 function addWaterMarkOnPage()
{
var watermarkCanvas=document.createElement("canvas");
watermarkCanvas.id="watermark";
var parentDivElement=document.getElementById("pageContainer")
var parentCanvasElment=document.getElementById("page");

watermarkCanvas.width=parentCanvasElment.width;
watermarkCanvas.height=parentCanvasElment.height;
watermarkCanvas.setAttribute("style","position:absolute")

if(parentDivElement.firstChild)
parentDivElement.insertBefore(watermarkCanvas, parentDivElement.firstChild);
else
parentDivElement.appendChild(watermarkCanvas);

var watermarkContext=watermarkCanvas.getContext('2d');

watermarkContext.globalAlpha=0.5;

watermarkContext.beginPath();
var metrics = watermarkContext.measureText("WaterMark Demo");
var width = metrics.width;
watermarkContext.rotate( (Math.PI / 180) * -45);  //rotate 25 degrees
watermarkContext.font = "72px comic Sans MS" ;
watermarkContext.fillStyle = "Red";
watermarkContext.fillText("WaterMark Demo",-width*2,72);
watermarkContext.fill();

Я хочу нарисовать текст («WaterMark Demo») по диагонали на странице. Я пытался сделать это разными способами, но я не добился успеха.

Подробнее здесь: https://stackoverflow.com/questions/167 ... tion-value