Need JavaScript based drawing/signature box

Discussion in 'Javascript' started by javelin, Jun 4, 2008.

  1. javelin

    javelin Guest

    I need to be able to create a javascript based drawing/signature box,
    and be able to save it. Can someone refer me to a script that will
    allow this, or even a 3rd party package for sale? It can't be Java or
    ActiveX.

    Thank you.
     
    javelin, Jun 4, 2008
    #1
    1. Advertising

  2. javelin

    Jorge Guest

    On Jun 4, 4:59 am, javelin <> wrote:
    > I need to be able to create a javascript based drawing/signature box,
    > and be able to save it. Can someone refer me to a script that will
    > allow this, or even a 3rd party package for sale? It can't be Java or
    > ActiveX.
    >
    > Thank you.


    This can be done with a <canvas>.
    A <canvas> tag creates a matrix of pixels of the given (width, height:
    pixels) dimensions.
    You could "sign" in it by drawing while tracking the mouse movements.
    And, the drawing can be converted to an image ( .png or .jpg ) by
    the .toDataUrl() method.

    <http://developer.apple.com/documentation/AppleApplications/Reference/
    SafariJSRef/Classes/Canvas.html>
    <http://developer.mozilla.org/en/docs/Canvas_tutorial>
    <http://www.whatwg.org/specs/web-apps/current-work/#the-canvas>

    HTH,
    --Jorge.
     
    Jorge, Jun 4, 2008
    #2
    1. Advertising

  3. javelin

    Tom Cole Guest

    On Jun 4, 4:49 am, Jorge <> wrote:
    > On Jun 4, 4:59 am, javelin <> wrote:
    >
    > > I need to be able to create a javascript based drawing/signature box,
    > > and be able to save it. Can someone refer me to a script that will
    > > allow this, or even a 3rd party package for sale? It can't be Java or
    > > ActiveX.

    >
    > > Thank you.

    >
    > This can be done with a <canvas>.
    > A <canvas> tag creates a matrix of pixels of the given (width, height:
    > pixels) dimensions.
    > You could "sign" in it by drawing while tracking the mouse movements.
    > And, the drawing can be converted to an image ( .png or .jpg ) by
    > the .toDataUrl() method.
    >
    > <http://developer.apple.com/documentation/AppleApplications/Reference/
    > SafariJSRef/Classes/Canvas.html>
    > <http://developer.mozilla.org/en/docs/Canvas_tutorial>
    > <http://www.whatwg.org/specs/web-apps/current-work/#the-canvas>
    >
    > HTH,
    > --Jorge.


    I've been working on something similar, but so far it only works in
    FF. Opera 9, Safari 3 and IE (using excanvas) it does not work. No
    errors, just nothing get drawn. Maybe someone can look and tell me
    what's wrong.

    The Test button renders the test code (from the Mozilla canvas site)
    but the mouse will only draw no the canvas in FF.

    <html>
    <head>
    <title>Signature Test</title>
    <!-- Canvas implementation for IE -->
    <script type="text/javascript" src="excanvas.js"></script>
    <script type="text/javascript">
    /** Initialize canvas, assigning event handlers. */
    function init() {
    var canvas = document.getElementById("signature");
    canvas.started = false;
    canvas.onmousedown = function(event) {
    var ctx = this.getContext("2d");
    var pos = getMousePositionInElement(this, event);
    ctx.beginPath(pos.x, pos.y);
    this.started = true;
    }
    canvas.onmouseup = function(event) {
    if (this.started) {
    var ctx = this.getContext("2d");
    var pos = getMousePositionInElement(this, event);
    ctx.stroke();
    ctx.closePath();
    this.started = false;
    }
    }
    canvas.onmousemove = function(event) {
    if (this.started) {
    var ctx = this.getContext("2d");
    var pos = getMousePositionInElement(this, event);
    ctx.lineTo(pos.x, pos.y);
    ctx.stroke();
    }
    }
    }
    /** Retrieves elements position on the screen. */
    function getElementPosition(element) {
    var posX = element.offsetLeft;
    var posY = element.offsetTop;
    try {
    while(element.offsetParent){
    posX += element.offsetParent.offsetLeft;
    posY += element.offsetParent.offsetTop;
    if(element == document.getElementsByTagName('body')[0]){
    break
    }
    else{
    element = element.offsetParent;
    }
    }
    }
    catch(e) {
    alert(e.message);
    }
    var dims = new Array(0);
    dims['x'] = posX;
    dims['y'] = posY;
    return dims;
    }
    /** Retrieves the current mouse location relative to the bounds of
    the given element. */
    function getMousePositionInElement(element, e) {
    var elementPosition = getElementPosition(element);
    var mousePosition = getMousePosition(e);
    var x = mousePosition.x - elementPosition.x;
    var y = mousePosition.y - elementPosition.y;
    var position = new Array();
    position['x'] = x;
    position['y'] = y;
    return position;
    }
    /** Gets the mouse location in reference to the page. */
    function getMousePosition(e) {
    var x = (window.event) ? window.event.clientX : e.pageX;
    var y = (window.event) ? window.event.clientY : e.pageY;
    var mousePosition = new Array();
    mousePosition['x'] = x;
    mousePosition['y'] = y;
    return mousePosition;
    }

    function test() {
    var canvas = document.getElementById('signature');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = 'green';
    ctx.fillRect(5, 5, 25, 25);
    ctx.strokeStyle = 'red';
    ctx.strokeRect(20, 20, 25, 25);
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.moveTo(1,1);
    ctx.lineTo(80,80);
    ctx.lineTo(100,20);
    ctx.closePath();
    ctx.stroke();
    ctx.strokeStyle = 'blue';
    ctx.fillStyle = 'black';
    ctx.beginPath();
    ctx.moveTo(120,50);
    ctx.lineTo(150,70);
    ctx.lineTo(150,50);
    ctx.quadraticCurveTo(150, 150, 80, 80);
    ctx.bezierCurveTo(85,25,75,37,75,40);
    ctx.closePath();
    ctx.fill();
    ctx.beginPath();
    ctx.rect(180,180,80,80);
    ctx.rect(200,200,80,80);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(200, 100, 20, 0, Math.PI, true);
    ctx.stroke();
    ctx.save();
    ctx.translate(150, 0);
    ctx.fillRect(0,0,150,150);
    ctx.fillStyle = '#09F'
    ctx.fillRect(15,15,120,120);
    ctx.fillStyle = '#FFF'
    ctx.globalAlpha = 0.5;
    ctx.fillRect(30,30,90,90);
    ctx.fillRect(45,45,60,60);
    ctx.fillRect(60,60,30,30);
    ctx.restore();
    ctx.save();
    ctx.translate(10, 140);
    ctx.fillStyle = '#FD0';
    ctx.fillRect(0,0,75,75);
    ctx.fillStyle = '#6C0';
    ctx.fillRect(75,0,75,75);
    ctx.fillStyle = '#09F)';
    ctx.fillRect(0,75,75,75);
    ctx.fillStyle = '#F30';
    ctx.fillRect(75,75,75,75);
    ctx.fillStyle = '#FFF';
    ctx.globalAlpha = 0.2;
    for (i=0;i<7;i++){
    ctx.beginPath();
    ctx.arc(75, 75, 10+(10*i), 0, Math.PI*2, true);
    ctx.fill();
    }
    ctx.restore();
    ctx.beginPath();
    ctx.arc(200, 200, 20, 0, Math.PI*2, true);
    ctx.stroke();
    ctx.save();
    ctx.globalAlpha = 1.0;
    //ctx.translate(75,75);
    for (i=1;i<6;i++){ // Loop through rings (from inside to out)
    ctx.save();
    ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';
    for (j=0;j<i*6;j++){ // draw individual dots
    ctx.rotate(Math.PI*2/(i*6));
    ctx.beginPath();
    ctx.rect(0,i*12.5,5,5);
    ctx.fill();
    }
    ctx.restore();
    }
    ctx.restore();
    }

    </script>
    </head>
    <body onload="init();">
    <div style="width: 500px; height: 150px; border: 1px solid
    black;">
    <canvas id="signature" width="498" height="148"></canvas>
    </div>
    <input type="button" value="Test" onclick="test();"/>
    </body>
    </html>

    Any help would be appreciated.
     
    Tom Cole, Jun 4, 2008
    #3
  4. javelin

    Tom Cole Guest

    On Jun 4, 4:37 pm, Tom Cole <> wrote:
    > On Jun 4, 4:49 am, Jorge <> wrote:
    >
    >
    >
    >
    >
    > > On Jun 4, 4:59 am, javelin <> wrote:

    >
    > > > I need to be able to create a javascript based drawing/signature box,
    > > > and be able to save it. Can someone refer me to a script that will
    > > > allow this, or even a 3rd party package for sale? It can't be Java or
    > > > ActiveX.

    >
    > > > Thank you.

    >
    > > This can be done with a <canvas>.
    > > A <canvas> tag creates a matrix of pixels of the given (width, height:
    > > pixels) dimensions.
    > > You could "sign" in it by drawing while tracking the mouse movements.
    > > And, the drawing can be converted to an image ( .png or .jpg ) by
    > > the .toDataUrl() method.

    >
    > > <http://developer.apple.com/documentation/AppleApplications/Reference/
    > > SafariJSRef/Classes/Canvas.html>
    > > <http://developer.mozilla.org/en/docs/Canvas_tutorial>
    > > <http://www.whatwg.org/specs/web-apps/current-work/#the-canvas>

    >
    > > HTH,
    > > --Jorge.

    >
    > I've been working on something similar, but so far it only works in
    > FF. Opera 9, Safari 3 and IE (using excanvas) it does not work. No
    > errors, just nothing get drawn. Maybe someone can look and tell me
    > what's wrong.
    >
    > The Test button renders the test code (from the Mozilla canvas site)
    > but the mouse will only draw no the canvas in FF.
    >
    > <html>
    >   <head>
    >     <title>Signature Test</title>
    >     <!-- Canvas implementation for IE -->
    >     <script type="text/javascript" src="excanvas.js"></script>
    >     <script type="text/javascript">
    >     /** Initialize canvas, assigning event handlers. */
    >     function init() {
    >         var canvas = document.getElementById("signature");
    >         canvas.started = false;
    >         canvas.onmousedown = function(event) {
    >                 var ctx = this.getContext("2d");
    >                 var pos = getMousePositionInElement(this, event);
    >                 ctx.beginPath(pos.x, pos.y);
    >                 this.started = true;
    >         }
    >         canvas.onmouseup = function(event) {
    >                  if (this.started) {
    >                         var ctx = this.getContext("2d");
    >                         var pos = getMousePositionInElement(this, event);
    >                         ctx.stroke();
    >                         ctx.closePath();
    >                         this.started = false;
    >                 }
    >         }
    >         canvas.onmousemove = function(event) {
    >                 if (this.started)  {
    >                         var ctx = this.getContext("2d");
    >                         var pos = getMousePositionInElement(this, event);
    >                         ctx.lineTo(pos.x, pos.y);
    >                         ctx.stroke();
    >                 }
    >         }
    >     }
    >     /** Retrieves elements position on the screen. */
    >     function getElementPosition(element) {
    >         var posX = element.offsetLeft;
    >         var posY = element.offsetTop;
    >         try {
    >                 while(element.offsetParent){
    >                         posX += element.offsetParent.offsetLeft;
    >                         posY += element.offsetParent.offsetTop;
    >                         if(element == document..getElementsByTagName('body')[0]){
    >                                 break
    >                         }
    >                         else{
    >                                 element = element.offsetParent;
    >                         }
    >                 }
    >         }
    >         catch(e) {
    >                   alert(e.message);
    >         }
    >         var dims = new Array(0);
    >         dims['x'] = posX;
    >         dims['y'] = posY;
    >         return dims;
    >     }
    >     /** Retrieves the current mouse location relative to the bounds of
    > the given element. */
    >     function getMousePositionInElement(element, e) {
    >         var elementPosition = getElementPosition(element);
    >         var mousePosition = getMousePosition(e);
    >         var x = mousePosition.x - elementPosition.x;
    >         var y = mousePosition.y - elementPosition.y;
    >         var position = new Array();
    >         position['x'] = x;
    >         position['y'] = y;
    >         return position;
    >     }
    >     /** Gets the mouse location in reference to the page. */
    >     function getMousePosition(e) {
    >         var x = (window.event) ? window.event.clientX : e.pageX;
    >         var y = (window.event) ? window.event.clientY : e.pageY;
    >         var mousePosition = new Array();
    >         mousePosition['x'] = x;
    >         mousePosition['y'] = y;
    >         return mousePosition;
    >     }
    >
    >     function test() {
    >         var canvas = document.getElementById('signature');
    >         var ctx = canvas.getContext('2d');
    >         ctx.fillStyle = 'green';
    >         ctx.fillRect(5, 5, 25, 25);
    >         ctx.strokeStyle = 'red';
    >         ctx.strokeRect(20, 20, 25, 25);
    >         ctx.beginPath();
    >         ctx.lineWidth = 1;
    >         ctx.moveTo(1,1);
    >         ctx.lineTo(80,80);
    >         ctx.lineTo(100,20);
    >         ctx.closePath();
    >         ctx.stroke();
    >         ctx.strokeStyle = 'blue';
    >         ctx.fillStyle = 'black';
    >         ctx.beginPath();
    >         ctx.moveTo(120,50);
    >         ctx.lineTo(150,70);
    >         ctx.lineTo(150,50);
    >         ctx.quadraticCurveTo(150, 150, 80, 80);
    >         ctx.bezierCurveTo(85,25,75,37,75,40);
    >         ctx.closePath();
    >         ctx.fill();
    >         ctx.beginPath();
    >         ctx.rect(180,180,80,80);
    >         ctx.rect(200,200,80,80);
    >         ctx.stroke();
    >         ctx.beginPath();
    >         ctx.arc(200, 100, 20, 0, Math.PI, true);
    >         ctx.stroke();
    >         ctx.save();
    >          ctx.translate(150, 0);
    >         ctx.fillRect(0,0,150,150);
    >         ctx.fillStyle = '#09F'
    >         ctx.fillRect(15,15,120,120);
    >         ctx.fillStyle = '#FFF'
    >         ctx.globalAlpha = 0.5;
    >         ctx.fillRect(30,30,90,90);
    >         ctx.fillRect(45,45,60,60);
    >         ctx.fillRect(60,60,30,30);
    >         ctx.restore();
    >         ctx.save();
    >         ctx.translate(10, 140);
    >         ctx.fillStyle = '#FD0';
    >         ctx.fillRect(0,0,75,75);
    >         ctx.fillStyle = '#6C0';
    >         ctx.fillRect(75,0,75,75);
    >         ctx.fillStyle = '#09F)';
    >         ctx.fillRect(0,75,75,75);
    >         ctx.fillStyle = '#F30';
    >         ctx.fillRect(75,75,75,75);
    >         ctx.fillStyle = '#FFF';
    >         ctx.globalAlpha = 0.2;
    >         for (i=0;i<7;i++){
    >             ctx.beginPath();
    >             ctx.arc(75, 75, 10+(10*i), 0, Math.PI*2, true);
    >             ctx.fill();
    >         }
    >         ctx.restore();
    >         ctx.beginPath();
    >         ctx.arc(200, 200, 20, 0, Math.PI*2, true);
    >         ctx.stroke();
    >         ctx.save();
    >         ctx.globalAlpha = 1.0;
    >         //ctx.translate(75,75);
    >         for (i=1;i<6;i++){ // Loop through rings (from inside toout)
    >               ctx.save();
    >               ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';
    >               for (j=0;j<i*6;j++){ // draw individual dots
    >                   ctx.rotate(Math.PI*2/(i*6));
    >                   ctx.beginPath();
    >                   ctx.rect(0,i*12.5,5,5);
    >                   ctx.fill();
    >               }
    >               ctx.restore();
    >          }
    >          ctx.restore();
    >     }
    >
    >     </script>
    >   </head>
    >   <body onload="init();">
    >     <div style="width: 500px; height: 150px; border: 1px solid
    > black;">
    >       <canvas id="signature" width="498" height="148"></canvas>
    >     </div>
    >     <input type="button" value="Test" onclick="test();"/>
    >   </body>
    > </html>
    >
    > Any help would be appreciated.- Hide quoted text -
    >
    > - Show quoted text -


    javelin -

    You can save the image data by including a hidden element in your form
    and set it's value to the result of canvas.toDataURL() and store it in
    your database. Then to later display this image, you merely have to
    set the src of an img tag to this string. It will then show the
    original image.
     
    Tom Cole, Jun 4, 2008
    #4
  5. javelin

    javelin Guest

    On Jun 4, 3:37 pm, Tom Cole <> wrote:
    > On Jun 4, 4:49 am, Jorge <> wrote:
    >
    >
    >
    >
    >
    > > On Jun 4, 4:59 am, javelin <> wrote:

    >
    > > > I need to be able to create a javascript baseddrawing/signature box,
    > > > and be able to save it. Can someone refer me to a script that will
    > > > allow this, or even a 3rd party package for sale? It can't be Java or
    > > > ActiveX.

    >
    > > > Thank you.

    >
    > > This can be done with a <canvas>.
    > > A <canvas> tag creates a matrix of pixels of the given (width, height:
    > > pixels) dimensions.
    > > You could "sign" in it bydrawingwhile tracking the mouse movements.
    > > And, thedrawingcan be converted to an image ( .png or .jpg ) by
    > > the .toDataUrl() method.

    >
    > > <http://developer.apple.com/documentation/AppleApplications/Reference/
    > > SafariJSRef/Classes/Canvas.html>
    > > <http://developer.mozilla.org/en/docs/Canvas_tutorial>
    > > <http://www.whatwg.org/specs/web-apps/current-work/#the-canvas>

    >
    > > HTH,
    > > --Jorge.

    >
    > I've been working on something similar, but so far it only works in
    > FF. Opera 9, Safari 3 and IE (using excanvas) it does not work. No
    > errors, just nothing get drawn. Maybe someone can look and tell me
    > what's wrong.
    >
    > The Test button renders the test code (from the Mozilla canvas site)
    > but the mouse will only draw no the canvas in FF.
    >
    > <html>
    >   <head>
    >     <title>Signature Test</title>
    >     <!-- Canvas implementation for IE -->
    >     <script type="text/javascript" src="excanvas.js"></script>
    >     <script type="text/javascript">
    >     /** Initialize canvas, assigning event handlers. */
    >     function init() {
    >         var canvas = document.getElementById("signature");
    >         canvas.started = false;
    >         canvas.onmousedown = function(event) {
    >                 var ctx = this.getContext("2d");
    >                 var pos = getMousePositionInElement(this, event);
    >                 ctx.beginPath(pos.x, pos.y);
    >                 this.started = true;
    >         }
    >         canvas.onmouseup = function(event) {
    >                  if (this.started) {
    >                         var ctx = this.getContext("2d");
    >                         var pos = getMousePositionInElement(this, event);
    >                         ctx.stroke();
    >                         ctx.closePath();
    >                         this.started = false;
    >                 }
    >         }
    >         canvas.onmousemove = function(event) {
    >                 if (this.started)  {
    >                         var ctx = this.getContext("2d");
    >                         var pos = getMousePositionInElement(this, event);
    >                         ctx.lineTo(pos.x, pos.y);
    >                         ctx.stroke();
    >                 }
    >         }
    >     }
    >     /** Retrieves elements position on the screen. */
    >     function getElementPosition(element) {
    >         var posX = element.offsetLeft;
    >         var posY = element.offsetTop;
    >         try {
    >                 while(element.offsetParent){
    >                         posX += element.offsetParent.offsetLeft;
    >                         posY += element.offsetParent.offsetTop;
    >                         if(element == document..getElementsByTagName('body')[0]){
    >                                 break
    >                         }
    >                         else{
    >                                 element = element.offsetParent;
    >                         }
    >                 }
    >         }
    >         catch(e) {
    >                   alert(e.message);
    >         }
    >         var dims = new Array(0);
    >         dims['x'] = posX;
    >         dims['y'] = posY;
    >         return dims;
    >     }
    >     /** Retrieves the current mouse location relative to the bounds of
    > the given element. */
    >     function getMousePositionInElement(element, e) {
    >         var elementPosition = getElementPosition(element);
    >         var mousePosition = getMousePosition(e);
    >         var x = mousePosition.x - elementPosition.x;
    >         var y = mousePosition.y - elementPosition.y;
    >         var position = new Array();
    >         position['x'] = x;
    >         position['y'] = y;
    >         return position;
    >     }
    >     /** Gets the mouse location in reference to the page. */
    >     function getMousePosition(e) {
    >         var x = (window.event) ? window.event.clientX : e.pageX;
    >         var y = (window.event) ? window.event.clientY : e.pageY;
    >         var mousePosition = new Array();
    >         mousePosition['x'] = x;
    >         mousePosition['y'] = y;
    >         return mousePosition;
    >     }
    >
    >     function test() {
    >         var canvas = document.getElementById('signature');
    >         var ctx = canvas.getContext('2d');
    >         ctx.fillStyle = 'green';
    >         ctx.fillRect(5, 5, 25, 25);
    >         ctx.strokeStyle = 'red';
    >         ctx.strokeRect(20, 20, 25, 25);
    >         ctx.beginPath();
    >         ctx.lineWidth = 1;
    >         ctx.moveTo(1,1);
    >         ctx.lineTo(80,80);
    >         ctx.lineTo(100,20);
    >         ctx.closePath();
    >         ctx.stroke();
    >         ctx.strokeStyle = 'blue';
    >         ctx.fillStyle = 'black';
    >         ctx.beginPath();
    >         ctx.moveTo(120,50);
    >         ctx.lineTo(150,70);
    >         ctx.lineTo(150,50);
    >         ctx.quadraticCurveTo(150, 150, 80, 80);
    >         ctx.bezierCurveTo(85,25,75,37,75,40);
    >         ctx.closePath();
    >         ctx.fill();
    >         ctx.beginPath();
    >         ctx.rect(180,180,80,80);
    >         ctx.rect(200,200,80,80);
    >         ctx.stroke();
    >         ctx.beginPath();
    >         ctx.arc(200, 100, 20, 0, Math.PI, true);
    >         ctx.stroke();
    >         ctx.save();
    >          ctx.translate(150, 0);
    >         ctx.fillRect(0,0,150,150);
    >         ctx.fillStyle = '#09F'
    >         ctx.fillRect(15,15,120,120);
    >         ctx.fillStyle = '#FFF'
    >         ctx.globalAlpha = 0.5;
    >         ctx.fillRect(30,30,90,90);
    >         ctx.fillRect(45,45,60,60);
    >         ctx.fillRect(60,60,30,30);
    >         ctx.restore();
    >         ctx.save();
    >         ctx.translate(10, 140);
    >         ctx.fillStyle = '#FD0';
    >         ctx.fillRect(0,0,75,75);
    >         ctx.fillStyle = '#6C0';
    >         ctx.fillRect(75,0,75,75);
    >         ctx.fillStyle = '#09F)';
    >         ctx.fillRect(0,75,75,75);
    >         ctx.fillStyle = '#F30';
    >         ctx.fillRect(75,75,75,75);
    >         ctx.fillStyle = '#FFF';
    >         ctx.globalAlpha = 0.2;
    >         for (i=0;i<7;i++){
    >             ctx.beginPath();
    >             ctx.arc(75, 75, 10+(10*i), 0, Math.PI*2, true);
    >             ctx.fill();
    >         }
    >         ctx.restore();
    >         ctx.beginPath();
    >         ctx.arc(200, 200, 20, 0, Math.PI*2, true);
    >         ctx.stroke();
    >         ctx.save();
    >         ctx.globalAlpha = 1.0;
    >         //ctx.translate(75,75);
    >         for (i=1;i<6;i++){ // Loop through rings (from inside toout)
    >               ctx.save();
    >               ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';
    >               for (j=0;j<i*6;j++){ // draw individual dots
    >                   ctx.rotate(Math.PI*2/(i*6));
    >                   ctx.beginPath();
    >                   ctx.rect(0,i*12.5,5,5);
    >                   ctx.fill();
    >               }
    >               ctx.restore();
    >          }
    >          ctx.restore();
    >     }
    >
    >     </script>
    >   </head>
    >   <body onload="init();">
    >     <div style="width: 500px; height: 150px; border: 1px solid
    > black;">
    >       <canvas id="signature" width="498" height="148"></canvas>
    >     </div>
    >     <input type="button" value="Test" onclick="test();"/>
    >   </body>
    > </html>
    >
    > Any help would be appreciated.- Hide quoted text -
    >
    > - Show quoted text -


    I've seen similar problems with other demos I've downloaded. What's up
    with that? I thought IE could do anything <sarcasm>. I definitely need
    this to work in IE, though.
     
    javelin, Jun 5, 2008
    #5
  6. javelin

    javelin Guest

    On Jun 4, 3:37 pm, Tom Cole <> wrote:
    > On Jun 4, 4:49 am, Jorge <> wrote:
    >
    >
    >
    >
    >
    > > On Jun 4, 4:59 am, javelin <> wrote:

    >
    > > > I need to be able to create a javascript baseddrawing/signature box,
    > > > and be able to save it. Can someone refer me to a script that will
    > > > allow this, or even a 3rd party package for sale? It can't be Java or
    > > > ActiveX.

    >
    > > > Thank you.

    >
    > > This can be done with a <canvas>.
    > > A <canvas> tag creates a matrix of pixels of the given (width, height:
    > > pixels) dimensions.
    > > You could "sign" in it bydrawingwhile tracking the mouse movements.
    > > And, thedrawingcan be converted to an image ( .png or .jpg ) by
    > > the .toDataUrl() method.

    >
    > > <http://developer.apple.com/documentation/AppleApplications/Reference/
    > > SafariJSRef/Classes/Canvas.html>
    > > <http://developer.mozilla.org/en/docs/Canvas_tutorial>
    > > <http://www.whatwg.org/specs/web-apps/current-work/#the-canvas>

    >
    > > HTH,
    > > --Jorge.

    >
    > I've been working on something similar, but so far it only works in
    > FF. Opera 9, Safari 3 and IE (using excanvas) it does not work. No
    > errors, just nothing get drawn. Maybe someone can look and tell me
    > what's wrong.
    >
    > The Test button renders the test code (from the Mozilla canvas site)
    > but the mouse will only draw no the canvas in FF.
    >
    > <html>
    >   <head>
    >     <title>Signature Test</title>
    >     <!-- Canvas implementation for IE -->
    >     <script type="text/javascript" src="excanvas.js"></script>
    >     <script type="text/javascript">
    >     /** Initialize canvas, assigning event handlers. */
    >     function init() {
    >         var canvas = document.getElementById("signature");
    >         canvas.started = false;
    >         canvas.onmousedown = function(event) {
    >                 var ctx = this.getContext("2d");
    >                 var pos = getMousePositionInElement(this, event);
    >                 ctx.beginPath(pos.x, pos.y);
    >                 this.started = true;
    >         }
    >         canvas.onmouseup = function(event) {
    >                  if (this.started) {
    >                         var ctx = this.getContext("2d");
    >                         var pos = getMousePositionInElement(this, event);
    >                         ctx.stroke();
    >                         ctx.closePath();
    >                         this.started = false;
    >                 }
    >         }
    >         canvas.onmousemove = function(event) {
    >                 if (this.started)  {
    >                         var ctx = this.getContext("2d");
    >                         var pos = getMousePositionInElement(this, event);
    >                         ctx.lineTo(pos.x, pos.y);
    >                         ctx.stroke();
    >                 }
    >         }
    >     }
    >     /** Retrieves elements position on the screen. */
    >     function getElementPosition(element) {
    >         var posX = element.offsetLeft;
    >         var posY = element.offsetTop;
    >         try {
    >                 while(element.offsetParent){
    >                         posX += element.offsetParent.offsetLeft;
    >                         posY += element.offsetParent.offsetTop;
    >                         if(element == document..getElementsByTagName('body')[0]){
    >                                 break
    >                         }
    >                         else{
    >                                 element = element.offsetParent;
    >                         }
    >                 }
    >         }
    >         catch(e) {
    >                   alert(e.message);
    >         }
    >         var dims = new Array(0);
    >         dims['x'] = posX;
    >         dims['y'] = posY;
    >         return dims;
    >     }
    >     /** Retrieves the current mouse location relative to the bounds of
    > the given element. */
    >     function getMousePositionInElement(element, e) {
    >         var elementPosition = getElementPosition(element);
    >         var mousePosition = getMousePosition(e);
    >         var x = mousePosition.x - elementPosition.x;
    >         var y = mousePosition.y - elementPosition.y;
    >         var position = new Array();
    >         position['x'] = x;
    >         position['y'] = y;
    >         return position;
    >     }
    >     /** Gets the mouse location in reference to the page. */
    >     function getMousePosition(e) {
    >         var x = (window.event) ? window.event.clientX : e.pageX;
    >         var y = (window.event) ? window.event.clientY : e.pageY;
    >         var mousePosition = new Array();
    >         mousePosition['x'] = x;
    >         mousePosition['y'] = y;
    >         return mousePosition;
    >     }
    >
    >     function test() {
    >         var canvas = document.getElementById('signature');
    >         var ctx = canvas.getContext('2d');
    >         ctx.fillStyle = 'green';
    >         ctx.fillRect(5, 5, 25, 25);
    >         ctx.strokeStyle = 'red';
    >         ctx.strokeRect(20, 20, 25, 25);
    >         ctx.beginPath();
    >         ctx.lineWidth = 1;
    >         ctx.moveTo(1,1);
    >         ctx.lineTo(80,80);
    >         ctx.lineTo(100,20);
    >         ctx.closePath();
    >         ctx.stroke();
    >         ctx.strokeStyle = 'blue';
    >         ctx.fillStyle = 'black';
    >         ctx.beginPath();
    >         ctx.moveTo(120,50);
    >         ctx.lineTo(150,70);
    >         ctx.lineTo(150,50);
    >         ctx.quadraticCurveTo(150, 150, 80, 80);
    >         ctx.bezierCurveTo(85,25,75,37,75,40);
    >         ctx.closePath();
    >         ctx.fill();
    >         ctx.beginPath();
    >         ctx.rect(180,180,80,80);
    >         ctx.rect(200,200,80,80);
    >         ctx.stroke();
    >         ctx.beginPath();
    >         ctx.arc(200, 100, 20, 0, Math.PI, true);
    >         ctx.stroke();
    >         ctx.save();
    >          ctx.translate(150, 0);
    >         ctx.fillRect(0,0,150,150);
    >         ctx.fillStyle = '#09F'
    >         ctx.fillRect(15,15,120,120);
    >         ctx.fillStyle = '#FFF'
    >         ctx.globalAlpha = 0.5;
    >         ctx.fillRect(30,30,90,90);
    >         ctx.fillRect(45,45,60,60);
    >         ctx.fillRect(60,60,30,30);
    >         ctx.restore();
    >         ctx.save();
    >         ctx.translate(10, 140);
    >         ctx.fillStyle = '#FD0';
    >         ctx.fillRect(0,0,75,75);
    >         ctx.fillStyle = '#6C0';
    >         ctx.fillRect(75,0,75,75);
    >         ctx.fillStyle = '#09F)';
    >         ctx.fillRect(0,75,75,75);
    >         ctx.fillStyle = '#F30';
    >         ctx.fillRect(75,75,75,75);
    >         ctx.fillStyle = '#FFF';
    >         ctx.globalAlpha = 0.2;
    >         for (i=0;i<7;i++){
    >             ctx.beginPath();
    >             ctx.arc(75, 75, 10+(10*i), 0, Math.PI*2, true);
    >             ctx.fill();
    >         }
    >         ctx.restore();
    >         ctx.beginPath();
    >         ctx.arc(200, 200, 20, 0, Math.PI*2, true);
    >         ctx.stroke();
    >         ctx.save();
    >         ctx.globalAlpha = 1.0;
    >         //ctx.translate(75,75);
    >         for (i=1;i<6;i++){ // Loop through rings (from inside toout)
    >               ctx.save();
    >               ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';
    >               for (j=0;j<i*6;j++){ // draw individual dots
    >                   ctx.rotate(Math.PI*2/(i*6));
    >                   ctx.beginPath();
    >                   ctx.rect(0,i*12.5,5,5);
    >                   ctx.fill();
    >               }
    >               ctx.restore();
    >          }
    >          ctx.restore();
    >     }
    >
    >     </script>
    >   </head>
    >   <body onload="init();">
    >     <div style="width: 500px; height: 150px; border: 1px solid
    > black;">
    >       <canvas id="signature" width="498" height="148"></canvas>
    >     </div>
    >     <input type="button" value="Test" onclick="test();"/>
    >   </body>
    > </html>
    >
    > Any help would be appreciated.- Hide quoted text -
    >
    > - Show quoted text -


    Tom, I found this site: http://www.tim-jarrett.com/labs_javascript_whiteboard.php
    It shows a sample that works for me in IE7. I had to download all of
    the JS files, but it works. However, the pixels are rather large. It
    doesn't appear to use the canvas you mention either, so I don't know
    how this will work for you (or me, for that matter). Let me know if
    you can make heads or tale of this.

    J
     
    javelin, Jun 5, 2008
    #6
  7. javelin

    Jorge Guest

    On Jun 5, 3:36 pm, javelin <> wrote:

    > Tom, I found this site:http://www.tim-jarrett.com/labs_javascript_whiteboard.php
    > It shows a sample that works for me in IE7. I had to download all of
    > the JS files, but it works. However, the pixels are rather large. It
    > doesn't appear to use the canvas you mention either, so I don't know
    > how this will work for you (or me, for that matter). Let me know if
    > you can make heads or tale of this.


    If you really need this to work in IE, I'd say, forget the canvas.
    It's not implemented in IE, and I don't think that any of the look-
    alikes,
    i.e. Googles' "explorerCanvas", or
    <http://me.eae.net/archive/2005/12/29/canvas-in-ie/>

    will let you mutate the canvas into an image : and you need
    the .toDataURL() functionality in order to save the drawing.

    The link above to the "whiteboard" just fills the DOM with lots of
    tiny,
    absolutely positioned "divs". How would you obtain a .jpg from that ?

    Unless a screen capture may serve you...
    ...or with some help coming from the server side.

    --Jorge.
     
    Jorge, Jun 5, 2008
    #7
  8. javelin

    Tom Cole Guest

    On Jun 5, 11:50 am, Jorge <> wrote:
    > On Jun 5, 3:36 pm, javelin <> wrote:
    >
    > > Tom, I found this site:http://www.tim-jarrett.com/labs_javascript_whiteboard.php
    > > It shows a sample that works for me in IE7. I had to download all of
    > > the JS files, but it works. However, the pixels are rather large. It
    > > doesn't appear to use the canvas you mention either, so I don't know
    > > how this will work for you (or me, for that matter). Let me know if
    > > you can make heads or tale of this.

    >
    > If you really need this to work in IE, I'd say, forget the canvas.
    > It's not implemented in IE, and I don't think that any of the look-
    > alikes,
    > i.e. Googles' "explorerCanvas", or
    > <http://me.eae.net/archive/2005/12/29/canvas-in-ie/>
    >
    > will let you mutate the canvas into an image : and you need
    > the .toDataURL() functionality in order to save the drawing.
    >
    > The link above to the "whiteboard" just fills the DOM with lots of
    > tiny,
    > absolutely positioned "divs". How would you obtain a .jpg from that ?
    >
    > Unless a screen capture may serve you...
    > ...or with some help coming from the server side.
    >
    > --Jorge.


    My issue is that my code also does not work in Opera or Safari, which
    do implement the canvas object. Now it may be that they don't
    implement some of the functionality that I'm trying to use in my event
    handlers, which is why the writing doesn't work, but the test() call
    does work. I was wondering if anyone knows where I can find specs on
    how Opera and Safari implement the canvas tag. Maybe then I can see if
    there is a method that I am calling that isn't implemented or has a
    blank implementation.

    I don't think it's my code, or it wouldn't work in FF either. Maybe
    it's just a matter of waiting for Opera and Safari to catch up with
    their implementations of canvas. I'm pretty certain that the excanvas
    (Google's attempt at providing a canvas tag) specifically says that it
    does not handle some of the methods I need for dynamic writing.
     
    Tom Cole, Jun 5, 2008
    #8
  9. javelin

    Jorge Guest

    On Jun 5, 6:10 pm, Tom Cole <> wrote:
    >
    > I don't think it's my code, or it wouldn't work in FF either. Maybe
    > it's just a matter of waiting for Opera and Safari to catch up with
    > their implementations of canvas. I'm pretty certain that the excanvas
    > (Google's attempt at providing a canvas tag) specifically says that it
    > does not handle some of the methods I need for dynamic writing.


    This (simpler version) works in Safari and FF, but not in Opera... :-(

    <html><head><style>body { margin: 0px; }</style><script>

    window.onresize= function () {
    var w= window, c= w.canvas;
    if (c) {
    c.height= w.innerHeight;
    c.width= w.innerWidth;
    }
    };
    window.onload= function () {
    var c, d= document, w= window, t;

    t= "All the window is a single, big canvas.\n";
    t+= "Just click anywhere and start drawing.\n"
    alert(t+"Resize the window to erase.");

    d.body.appendChild(w.canvas= d.createElement("canvas"));
    w.canvas.on= false;
    c= w.canvas.getContext("2d");
    w.onresize();

    w.canvas.onmousedown = function(e) {
    c.beginPath(); c.moveTo(e.clientX, e.clientY);
    this.on= true;
    };
    w.canvas.onmouseup = function(e) { this.on= false };
    w.canvas.onmousemove = function(e) {
    if (this.on) {
    c.lineTo(e.clientX, e.clientY); c.stroke();
    }
    };
    };
    </script></head><body></body></html>

    --Jorge.
     
    Jorge, Jun 5, 2008
    #9
  10. javelin

    Jorge Guest

    On Jun 5, 6:10 pm, Tom Cole <> wrote:
    > (...) Maybe
    > it's just a matter of waiting for Opera and Safari to catch up (..)


    Hey, Apple *invented* this canvas thingy...

    --Jorge.
     
    Jorge, Jun 5, 2008
    #10
  11. javelin

    javelin Guest

    On Jun 5, 1:22 pm, Jorge <> wrote:
    > On Jun 5, 6:10 pm, Tom Cole <> wrote:
    >
    > > (...) Maybe
    > > it's just a matter of waiting for Opera and Safari to catch up (..)

    >
    > Hey, Apple *invented* this canvas thingy...
    >
    > --Jorge.


    Darn it! Is that why it doesn't work?!?

    Well the link I sent Tom works in IE, but I can't figure out how to
    get it to work without referring to the prototype on the author's
    site. Refering to the one I downloaded doesn't work, for some reason.
    In general, it looks like a great solution, if I could get that to
    work.
     
    javelin, Jun 5, 2008
    #11
  12. javelin

    Jorge Guest

    On Jun 5, 8:49 pm, javelin <> wrote:

    > Darn it! Is that why it doesn't work?!?
    >


    Ja-ja-ja.

    Change line # 14 :

    ctx.beginPath(pos.x, pos.y);

    to:

    ctx.beginPath(); ctx.moveTo(pos.x, pos.y);

    --Jorge.
     
    Jorge, Jun 5, 2008
    #12
  13. javelin

    Tom Cole Guest

    On Jun 5, 2:22 pm, Jorge <> wrote:
    > On Jun 5, 6:10 pm, Tom Cole <> wrote:
    >
    > > (...) Maybe
    > > it's just a matter of waiting for Opera and Safari to catch up (..)

    >
    > Hey, Apple *invented* this canvas thingy...
    >
    > --Jorge.


    So my whole problem was this:

    code was:

    ctx.beginPatb(pos.x, pos.y);

    code should have been:

    ctx.beginPath();
    ctx.moveTo(pos.x, pos.y);

    Cool. Now it works. In Opera and FF I can get the image data for
    remote storage, in Safari I cannot. It does not appear to support
    toDataURL().

    Thanks for your help!
     
    Tom Cole, Jun 5, 2008
    #13
  14. javelin

    Jorge Guest

    On Jun 5, 9:05 pm, Tom Cole <> wrote:

    >
    > Cool. Now it works. In Opera and FF I can get the image data for
    > remote storage, in Safari I cannot. It does not appear to support
    > toDataURL().


    Yes, it works :

    <html><head><script>
    window.onload= function () {
    var b, c;
    c= document.createElement("canvas");
    c.height= c.width= 10;
    b= c.getContext('2d');
    alert(c.toDataURL('image/png'));
    alert(c.toDataURL('image/jpeg'));
    };
    </script></head><body></body></html>

    --Jorge.
     
    Jorge, Jun 5, 2008
    #14
  15. javelin

    Jorge Guest

    On Jun 5, 9:05 pm, Tom Cole <> wrote:
    > Cool. Now it works. In Opera and FF I can get the image data for
    > remote storage, in Safari I cannot. It does not appear to support
    > toDataURL().


    Yes, it does :

    <html><head><script>
    window.onload= function () {
    var b, c;
    c= document.createElement("canvas");
    c.height= c.width= 10;
    b= c.getContext('2d');
    alert(c.toDataURL('image/png'));
    alert(c.toDataURL('image/jpeg'));
    };
    </script></head><body></body></html>

    --Jorge.
     
    Jorge, Jun 5, 2008
    #15
  16. javelin

    Tom Cole Guest

    On Jun 5, 3:29 pm, Jorge <> wrote:
    > On Jun 5, 9:05 pm, Tom Cole <> wrote:
    >
    > > Cool. Now it works. In Opera and FF I can get the image data for
    > > remote storage, in Safari I cannot. It does not appear to support
    > > toDataURL().

    >
    > Yes, it does :
    >
    > <html><head><script>
    > window.onload= function () {
    >   var b, c;
    >   c= document.createElement("canvas");
    >   c.height= c.width= 10;
    >   b= c.getContext('2d');
    >   alert(c.toDataURL('image/png'));
    >   alert(c.toDataURL('image/jpeg'));};
    >
    > </script></head><body></body></html>
    >
    > --Jorge.


    Awesome. I get the following in the developer /web inspector:

    "Value undefined (result of expression cavas.toDataURL) is not an
    object."

    It references this line:

    var dataURL = canvas.toDataURL("image/png");
    --> alert(dataURL);
     
    Tom Cole, Jun 6, 2008
    #16
  17. javelin

    Tom Cole Guest

    On Jun 6, 8:20 am, Tom Cole <> wrote:
    > On Jun 5, 3:29 pm, Jorge <> wrote:
    >
    >
    >
    >
    >
    > > On Jun 5, 9:05 pm, Tom Cole <> wrote:

    >
    > > > Cool. Now it works. In Opera and FF I can get the image data for
    > > > remote storage, in Safari I cannot. It does not appear to support
    > > > toDataURL().

    >
    > > Yes, it does :

    >
    > > <html><head><script>
    > > window.onload= function () {
    > >   var b, c;
    > >   c= document.createElement("canvas");
    > >   c.height= c.width= 10;
    > >   b= c.getContext('2d');
    > >   alert(c.toDataURL('image/png'));
    > >   alert(c.toDataURL('image/jpeg'));};

    >
    > > </script></head><body></body></html>

    >
    > > --Jorge.

    >
    > Awesome. I get the following in the developer /web inspector:
    >
    > "Value undefined (result of expression cavas.toDataURL) is not an
    > object."
    >
    > It references this line:
    >
    >     var dataURL = canvas.toDataURL("image/png");
    > --> alert(dataURL);- Hide quoted text -
    >
    > - Show quoted text -


    BTW..using Safari for Windows Version 3.1.1 (525.17).
     
    Tom Cole, Jun 6, 2008
    #17
  18. javelin

    Tom Cole Guest

    On Jun 6, 8:21 am, Tom Cole <> wrote:
    > On Jun 6, 8:20 am, Tom Cole <> wrote:
    >
    >
    >
    >
    >
    > > On Jun 5, 3:29 pm, Jorge <> wrote:

    >
    > > > On Jun 5, 9:05 pm, Tom Cole <> wrote:

    >
    > > > > Cool. Now it works. In Opera and FF I can get the image data for
    > > > > remote storage, in Safari I cannot. It does not appear to support
    > > > > toDataURL().

    >
    > > > Yes, it does :

    >
    > > > <html><head><script>
    > > > window.onload= function () {
    > > >   var b, c;
    > > >   c= document.createElement("canvas");
    > > >   c.height= c.width= 10;
    > > >   b= c.getContext('2d');
    > > >   alert(c.toDataURL('image/png'));
    > > >   alert(c.toDataURL('image/jpeg'));};

    >
    > > > </script></head><body></body></html>

    >
    > > > --Jorge.

    >
    > > Awesome. I get the following in the developer /web inspector:

    >
    > > "Value undefined (result of expression cavas.toDataURL) is not an
    > > object."

    >
    > > It references this line:

    >
    > >     var dataURL = canvas.toDataURL("image/png");
    > > --> alert(dataURL);- Hide quoted text -

    >
    > > - Show quoted text -

    >
    > BTW..using Safari for Windows Version 3.1.1 (525.17).- Hide quoted text -
    >
    > - Show quoted text -


    Addendum: Safari for windows with the Acid3 WebKit works. Thanks.
     
    Tom Cole, Jun 6, 2008
    #18
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. JJBW
    Replies:
    1
    Views:
    10,225
    Joerg Jooss
    Apr 24, 2004
  2. Replies:
    1
    Views:
    646
    Kevin Spencer
    Jan 9, 2006
  3. Steve G
    Replies:
    2
    Views:
    3,571
    Steve G
    Dec 28, 2005
  4. defn noob
    Replies:
    1
    Views:
    403
    Mark Space
    Jun 28, 2008
  5. Gustavo Narea
    Replies:
    14
    Views:
    871
    Gustavo Narea
    Feb 16, 2009
Loading...

Share This Page