Hi Jayaseelan,

Thanks for sending the sample project. I would recommend taking advantage 
of the custom annotation framework and custom tools so that you don't have 
to create an extra canvas and calculate the location of the mouse yourself. 
If you create the signatures as custom annotations then they will 
automatically be drawn in the correct location.

Here's an example which creates a custom annotation using a custom tool:
var CustomSignatureAnnotation = function() {
    Annotations.MarkupAnnotation.call(this);
    this.text = 'Test Signature';
    this.font = '28pt Brush Script MT';
};

CustomSignatureAnnotation.prototype = $.extend(new Annotations.
MarkupAnnotation(), {
    elementname: 'custom-signature',

    draw: function(ctx) {
        ctx.translate(this.X, this.Y);
        ctx.textBaseline = 'top';
        ctx.font = this.font;
        ctx.fillStyle = 'black';
        ctx.fillText(this.text, 0, 0);
    }
});

var SignatureTool = function(docViewer) {
    Tools.GenericAnnotationCreateTool.call(this, docViewer, 
CustomSignatureAnnotation);
};

SignatureTool.prototype = $.extend(new Tools.GenericAnnotationCreateTool(), 
{
    mouseLeftDown: function() {
        Tools.GenericAnnotationCreateTool.prototype.mouseLeftDown.apply(this
, arguments);
        if (this.annotation) {
            this.annotation.font = currentFont;
            this.annotation.text = currentText;
            var annotManager = this.docViewer.GetAnnotationManager();
            annotManager.AddAnnotation(this.annotation);
            annotManager.DrawAnnotations(this.annotation.PageNumber);

            this.annotation = null;
        }
    }
});

Then just set the tool mode to the signature tool when you want to create a 
signature: 
readerControl.docViewer.SetToolMode(SignatureTool)

I updated your ReaderControl.html with a quick implementation and have 
attached it here. You'll probably want to clean it up some more and remove 
the use of your extra canvas.

Matt Parizeau
Software Developer
PDFTron Systems Inc.

On Monday, January 5, 2015 4:00:40 AM UTC-8, Jayaseelan A wrote:
>
> Hi,
>  we are create sample application for signature in the webviewer 
> HTML5.They are two options to create signature,
>  1.FreeHand tool(default annotation tool)
>  2.Custom signature
>  
>  We are facing some issue related to Custom signature.
>  my requirement append text(Custom signature) on webviewer canvas,we draw 
> text on the canvas detect a mouse click event to get the X and Y 
> coordinates when a user left clicks on the canvas.but When we click zoom in 
> and out the text(Custom signature) will be change/hide(coordinates points) 
> on the document.
>
>  How do I get the the X and Y coordinates?
>  Can you provide me with sample code to create (and display) custom 
> annotations?
>  
>  sample code:
>                 canvas = document.getElementById('myCanvas');
>                 context = canvas.getContext('2d');              
>                 canvas.addEventListener('click', function (evt) {
>                             var rect = canvas.getBoundingClientRect();
>                             var mousePos = getMousePos(canvas, 
> evt);                          
>                             x= evt.clientX - rect.left,
>                             y= evt.clientY - rect.top
>                             var fontstyle = "28pt Brush Script MT";
>                             var text = $('#hdtext').val();
>                             var context = canvas.getContext('2d'); 
>                             context.font = fontstyle;
>                             context.fillStyle = 
> 'black';                            
>                             context.fillText(text, x, 
> y);                      
>                          
>                 }, false);
>  
>  I'm having trouble on custom signature.please help me ASAP.
>  
> please refer source code and image attachement.
>
>
> https://drive.google.com/folderview?id=0B4452hNq_EqrNTBwZkNoTS1WYVE&usp=sharing
>
>  Note: Freehand tool is works great.
>