Draw Signature Image using Javascript

Posted on 2005-04-13
Last Modified: 2008-01-09
hi, i use a PDA to view my personal website .
i want to let other people able to sign their signature in a given screen ...
the signature should be visible on screen ...
how can i do that by javascript?

if not javascript, any other method can recommend ?

Question by:chongkeng_woon
    LVL 6

    Assisted Solution


    this feature is impossible to be implemented using javascript, as it is only a client script language.

    however, you can easily achieve this using .net (eg. c# or roughly the code should be:

                private static Bitmap CreateImage( string sImageText )
                      Bitmap bmpImage = new Bitmap( 1, 1 );

                      int iWidth = 0;
                      int iHeight = 0;

                      //Create a Font object
                      Font MyFont = new Font( "Verdana", 24, System.Drawing.FontStyle.Bold, System.Drawing.GraphicsUnit.Point );

                      // Create a Graphics Class to measure the text width      
                      Graphics MyGraphics = Graphics.FromImage( bmpImage );

                      // Resize the bitmap, this is where the bitmap is sized.
                      iWidth = (int)MyGraphics.MeasureString( sImageText, MyFont ).Width;
                      iHeight = (int)MyGraphics.MeasureString( sImageText, MyFont ).Height;

                      // Create the bmpImage again with the correct size for the text and font.
                      bmpImage = new Bitmap( bmpImage, new Size( iWidth, iHeight ) );

                      // Apply the colors and draw the bitmap.
                      MyGraphics = Graphics.FromImage( bmpImage );
                      MyGraphics.Clear( Color.Navy );
                      MyGraphics.TextRenderingHint = TextRenderingHint.AntiAlias;
                      MyGraphics.DrawString( sImageText, MyFont, new SolidBrush( Color.Red ), 0, 0 );

                      return( bmpImage );

    Author Comment

    i know only little about Microsoft .NET technology ....i developed software basically using Delphi the way, you are right, it is impossible for  javascript do that ...however, i know that Java Applet can do that ...

    how can .NET technology can do this on web? i just wonder where can i get any example from the web ? or even explaination ?

    by the way, since i am viewing this website at PDA the application developed by .NET compatible to all the PDA operating system ?

    sorry for asking so many questions , i am still new to that .....

    LVL 6

    Accepted Solution

    check this example, this is how to use .net to implement a PDA application

    Author Comment

    finally, i did it by using javascript ...i change the
    <td> bgcolor to black color in "onMouseMove" event works fine in IE 6 ...

    <td width=3px height=3px OnMouseOver="changecolor()">&nbsp;</td>

    however, when i view it in PDA (running under Window CE) doesn't work ..
    the stylus seems like does not recognize the "OnMouseMove" event handler ..
    it does not change the <td> bgcolor to "black"

    what should be the event handler for stylus in order to do the "OnMouseMove" event?

    thanks again


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
    This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now