Gnostice Document Studio .NET > Going Deeper > Document Viewing > ASP.NET

Documents go through many stages of completion before being finalized or they may be categorized based on the level of secrecy of the information contained in them. It often helps to convey this meta information to the stakeholders so they are aware of the document status when working with it. One of the ways to do this is by showing a watermark on each page of the document. Also, the watermarking may only be required to be shown when viewing and printing the document and not be applied on the document itself. The ASP.NET document viewer allows view and print pages to be watermarked. In this section we cover how this can be done.

Adding watermark is achieved by handling the afterPageDraw event in the JavaScript code. The event passes many parameters one of which is the 2D graphics context of the HTML canvas on which the document page is already drawn. The watermark text needs to be drawn using this graphics context.

After creating the document viewer object add the event handler which draws the text.

  $(document).ready(function () {
    documentViewer.addEventListener("afterPageDraw", function (e) {
      var scaleX = e.pageScaleX;
      var scaleY = e.pageScaleY;
      var actualPageWidth = e.actualPageWidth;
      var actualPageHeight = e.actualPageHeight;
      var ctx = e.context;

      // The text to be drawn
      var watermarkText = "DRAFT";

      // Save the context
      ctx.save();

      // Size the text appropriately based on page scaling
      ctx.font = 120 * scaleX + "px Arial";

      // Color (and transparency) to use
      ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';

      // Position the text in the center of the page
      var left = (actualPageWidth * scaleX) / 2;
      var top = (actualPageHeight * scaleY) / 2;
      ctx.translate(left, top);

      // Rotate the text by 45 degrees
      ctx.rotate(-Math.PI / 4);

      // Draw it
      var textSize = ctx.measureText(watermarkText);
      var textWidth = textSize.width;
      ctx.fillText(watermarkText, -(textWidth / 2), 0);

      // Restore the context
      ctx.restore();
    });
  });

You can see the screen-shot below which shows the viewer displaying the document with the added watermark.

XtremeDocumentStudio-dotNET-HTML5-viewer-watermark-1

The watermark is also visible in the printed pages.

XtremeDocumentStudio-dotNET-HTML5-viewer-watermark-2

However the document itself is unchanged so a downloaded copy of it will NOT contain the watermark.

For reference here are the properties passed in the event data object of the "afterPageDraw" event:

  {
    context,          // CanvasRenderingContext2D
    source,           // View being drawn. "thumbnail" for thumbnail, "viewer" for
                      // main document view, "printer" for print view
    pageNumber,       // Page number which is drawn
    zoomPercentage,   // Page zoom percentage
    rotationAngle,    // Page rotation angle
    pageScaleX,       // Page scaling applied in horizontal direction
    pageScaleY,       // Page scaling applied in vertical direction
    actualPageWidth,  // Original page width in pixels
    actualPageHeight  // Original page height in pixels
  }