Need JavaScript based drawing/signature box

26 views
Skip to first unread message

javelin

unread,
Jun 3, 2008, 10:59:16 PM6/3/08
to
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.

Jorge

unread,
Jun 4, 2008, 4:49:30 AM6/4/08
to

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.

Tom Cole

unread,
Jun 4, 2008, 4:37:16 PM6/4/08
to

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

unread,
Jun 4, 2008, 4:50:46 PM6/4/08
to
> 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.

javelin

unread,
Jun 5, 2008, 8:59:23 AM6/5/08
to
On Jun 4, 3:37 pm, Tom Cole <tco...@gmail.com> wrote:
> On Jun 4, 4:49 am, Jorge <jo...@jorgechamorro.com> wrote:
>
>
>
>
>
> > On Jun 4, 4:59 am, javelin <jmevalen...@gmail.com> 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
> 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

unread,
Jun 5, 2008, 9:36:57 AM6/5/08
to
On Jun 4, 3:37 pm, Tom Cole <tco...@gmail.com> wrote:
> On Jun 4, 4:49 am, Jorge <jo...@jorgechamorro.com> wrote:
>
>
>
>
>
> > On Jun 4, 4:59 am, javelin <jmevalen...@gmail.com> 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
> 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

Jorge

unread,
Jun 5, 2008, 11:50:33 AM6/5/08
to
On Jun 5, 3:36 pm, javelin <jmevalen...@gmail.com> 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.

Tom Cole

unread,
Jun 5, 2008, 12:10:35 PM6/5/08
to

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.

Jorge

unread,
Jun 5, 2008, 2:11:44 PM6/5/08
to
On Jun 5, 6:10 pm, Tom Cole <tco...@gmail.com> 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

unread,
Jun 5, 2008, 2:22:00 PM6/5/08
to
On Jun 5, 6:10 pm, Tom Cole <tco...@gmail.com> wrote:
> (...) Maybe
> it's just a matter of waiting for Opera and Safari to catch up (..)

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

--Jorge.

javelin

unread,
Jun 5, 2008, 2:49:52 PM6/5/08
to

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.

Jorge

unread,
Jun 5, 2008, 3:03:33 PM6/5/08
to
On Jun 5, 8:49 pm, javelin <jmevalen...@gmail.com> 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.

Tom Cole

unread,
Jun 5, 2008, 3:05:15 PM6/5/08
to

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!

Message has been deleted

Jorge

unread,
Jun 5, 2008, 3:29:48 PM6/5/08
to
On Jun 5, 9:05 pm, Tom Cole <tco...@gmail.com> 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'));

Tom Cole

unread,
Jun 6, 2008, 8:20:00 AM6/6/08
to

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

unread,
Jun 6, 2008, 8:21:12 AM6/6/08
to
> --> alert(dataURL);- Hide quoted text -

>
> - Show quoted text -

BTW..using Safari for Windows Version 3.1.1 (525.17).

Tom Cole

unread,
Jun 6, 2008, 10:39:56 AM6/6/08
to
> 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.

Reply all
Reply to author
Forward
0 new messages