Need JavaScript based drawing/signature box

**Jorge** · Jun 27 '08, 07:13 PM

Re: Need JavaScript based drawing/signature box

On Jun 4, 4:59 am, javelin <jmevalen...@gm ail.comwrote:

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 <canvastag 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/documenta...ons/Reference/
SafariJSRef/Classes/Canvas.html>
<http://developer.mozil la.org/en/docs/Canvas_tutorial >
<http://www.whatwg.org/specs/web-apps/current-work/#the-canvas>

HTH,
--Jorge.

**Tom Cole** · Jun 27 '08, 07:13 PM

Re: Need JavaScript based drawing/signature box

On Jun 4, 4:49 am, Jorge <jo...@jorgecha morro.comwrote:

On Jun 4, 4:59 am, javelin <jmevalen...@gm ail.comwrote:
>

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 <canvastag 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/documenta...ons/Reference/
SafariJSRef/Classes/Canvas.html>
<http://developer.mozil la.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>Signatur e Test</title>

<script type="text/javascript" src="excanvas.j s"></script>
<script type="text/javascript">
/** Initialize canvas, assigning event handlers. */
function init() {
var canvas = document.getEle mentById("signa ture");
canvas.started = false;
canvas.onmoused own = function(event) {
var ctx = this.getContext ("2d");
var pos = getMousePositio nInElement(this , event);
ctx.beginPath(p os.x, pos.y);
this.started = true;
}
canvas.onmouseu p = function(event) {
if (this.started) {
var ctx = this.getContext ("2d");
var pos = getMousePositio nInElement(this , event);
ctx.stroke();
ctx.closePath() ;
this.started = false;
}
}
canvas.onmousem ove = function(event) {
if (this.started) {
var ctx = this.getContext ("2d");
var pos = getMousePositio nInElement(this , event);
ctx.lineTo(pos. x, pos.y);
ctx.stroke();
}
}
}
/** Retrieves elements position on the screen. */
function getElementPosit ion(element) {
var posX = element.offsetL eft;
var posY = element.offsetT op;
try {
while(element.o ffsetParent){
posX += element.offsetP arent.offsetLef t;
posY += element.offsetP arent.offsetTop ;
if(element == document.getEle mentsByTagName( 'body')[0]){
break
}
else{
element = element.offsetP arent;
}
}
}
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 getMousePositio nInElement(elem ent, e) {
var elementPosition = getElementPosit ion(element);
var mousePosition = getMousePositio n(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 getMousePositio n(e) {
var x = (window.event) ? window.event.cl ientX : e.pageX;
var y = (window.event) ? window.event.cl ientY : e.pageY;
var mousePosition = new Array();
mousePosition['x'] = x;
mousePosition['y'] = y;
return mousePosition;
}

function test() {
var canvas = document.getEle mentById('signa ture');
var ctx = canvas.getConte xt('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,8 0);
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.quadraticCu rveTo(150, 150, 80, 80);
ctx.bezierCurve To(85,25,75,37, 75,40);
ctx.closePath() ;
ctx.fill();
ctx.beginPath() ;
ctx.rect(180,18 0,80,80);
ctx.rect(200,20 0,80,80);
ctx.stroke();
ctx.beginPath() ;
ctx.arc(200, 100, 20, 0, Math.PI, true);
ctx.stroke();
ctx.save();
ctx.translate(1 50, 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(1 0, 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(7 5,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 27 '08, 07:13 PM

Re: Need JavaScript based drawing/signature box

On Jun 4, 4:37 pm, Tom Cole <tco...@gmail.c omwrote:

On Jun 4, 4:49 am, Jorge <jo...@jorgecha morro.comwrote:
>
>
>
>
>

On Jun 4, 4:59 am, javelin <jmevalen...@gm ail.comwrote:

>

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 <canvastag 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/documenta...ons/Reference/
SafariJSRef/Classes/Canvas.html>
<http://developer.mozil la.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>Signatur e Test</title>

<script type="text/javascript" src="excanvas.j s"></script>
<script type="text/javascript">
/** Initialize canvas, assigning event handlers. */
function init() {
var canvas = document.getEle mentById("signa ture");
canvas.started = false;
canvas.onmoused own = function(event) {
var ctx = this.getContext ("2d");
var pos = getMousePositio nInElement(this , event);
ctx.beginPath(p os.x, pos.y);
this.started = true;
}
canvas.onmouseu p = function(event) {
if (this.started) {
var ctx = this.getContext ("2d");
var pos = getMousePositio nInElement(this , event);
ctx.stroke();
ctx.closePath() ;
this.started = false;
}
}
canvas.onmousem ove = function(event) {
if (this.started) {
var ctx = this.getContext ("2d");
var pos = getMousePositio nInElement(this , event);
ctx.lineTo(pos. x, pos.y);
ctx.stroke();
}
}
}
/** Retrieves elements position on the screen. */
function getElementPosit ion(element) {
var posX = element.offsetL eft;
var posY = element.offsetT op;
try {
while(element.o ffsetParent){
posX += element.offsetP arent.offsetLef t;
posY += element.offsetP arent.offsetTop ;
if(element == document..getEl ementsByTagName ('body')[0]){
break
}
else{
element = element.offsetP arent;
}
}
}
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 getMousePositio nInElement(elem ent, e) {
var elementPosition = getElementPosit ion(element);
var mousePosition = getMousePositio n(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 getMousePositio n(e) {
var x = (window.event) ? window.event.cl ientX : e.pageX;
var y = (window.event) ? window.event.cl ientY : e.pageY;
var mousePosition = new Array();
mousePosition['x'] = x;
mousePosition['y'] = y;
return mousePosition;
}
>
function test() {
var canvas = document.getEle mentById('signa ture');
var ctx = canvas.getConte xt('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,8 0);
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.quadraticCu rveTo(150, 150, 80, 80);
ctx.bezierCurve To(85,25,75,37, 75,40);
ctx.closePath() ;
ctx.fill();
ctx.beginPath() ;
ctx.rect(180,18 0,80,80);
ctx.rect(200,20 0,80,80);
ctx.stroke();
ctx.beginPath() ;
ctx.arc(200, 100, 20, 0, Math.PI, true);
ctx.stroke();
ctx.save();
ctx.translate(1 50, 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(1 0, 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(7 5,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.toDataUR L() 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** · Jun 27 '08, 07:13 PM

Re: Need JavaScript based drawing/signature box

On Jun 4, 3:37 pm, Tom Cole <tco...@gmail.c omwrote:

On Jun 4, 4:49 am, Jorge <jo...@jorgecha morro.comwrote:
>
>
>
>
>

On Jun 4, 4:59 am, javelin <jmevalen...@gm ail.comwrote:

>

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 <canvastag 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/documenta...ons/Reference/
SafariJSRef/Classes/Canvas.html>
<http://developer.mozil la.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>Signatur e Test</title>

<script type="text/javascript" src="excanvas.j s"></script>
<script type="text/javascript">
/** Initialize canvas, assigning event handlers. */
function init() {
var canvas = document.getEle mentById("signa ture");
canvas.started = false;
canvas.onmoused own = function(event) {
var ctx = this.getContext ("2d");
var pos = getMousePositio nInElement(this , event);
ctx.beginPath(p os.x, pos.y);
this.started = true;
}
canvas.onmouseu p = function(event) {
if (this.started) {
var ctx = this.getContext ("2d");
var pos = getMousePositio nInElement(this , event);
ctx.stroke();
ctx.closePath() ;
this.started = false;
}
}
canvas.onmousem ove = function(event) {
if (this.started) {
var ctx = this.getContext ("2d");
var pos = getMousePositio nInElement(this , event);
ctx.lineTo(pos. x, pos.y);
ctx.stroke();
}
}
}
/** Retrieves elements position on the screen. */
function getElementPosit ion(element) {
var posX = element.offsetL eft;
var posY = element.offsetT op;
try {
while(element.o ffsetParent){
posX += element.offsetP arent.offsetLef t;
posY += element.offsetP arent.offsetTop ;
if(element == document..getEl ementsByTagName ('body')[0]){
break
}
else{
element = element.offsetP arent;
}
}
}
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 getMousePositio nInElement(elem ent, e) {
var elementPosition = getElementPosit ion(element);
var mousePosition = getMousePositio n(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 getMousePositio n(e) {
var x = (window.event) ? window.event.cl ientX : e.pageX;
var y = (window.event) ? window.event.cl ientY : e.pageY;
var mousePosition = new Array();
mousePosition['x'] = x;
mousePosition['y'] = y;
return mousePosition;
}
>
function test() {
var canvas = document.getEle mentById('signa ture');
var ctx = canvas.getConte xt('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,8 0);
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.quadraticCu rveTo(150, 150, 80, 80);
ctx.bezierCurve To(85,25,75,37, 75,40);
ctx.closePath() ;
ctx.fill();
ctx.beginPath() ;
ctx.rect(180,18 0,80,80);
ctx.rect(200,20 0,80,80);
ctx.stroke();
ctx.beginPath() ;
ctx.arc(200, 100, 20, 0, Math.PI, true);
ctx.stroke();
ctx.save();
ctx.translate(1 50, 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(1 0, 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(7 5,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 27 '08, 07:13 PM

Re: Need JavaScript based drawing/signature box

On Jun 4, 3:37 pm, Tom Cole <tco...@gmail.c omwrote:

On Jun 4, 4:49 am, Jorge <jo...@jorgecha morro.comwrote:
>
>
>
>
>

On Jun 4, 4:59 am, javelin <jmevalen...@gm ail.comwrote:

>

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 <canvastag 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/documenta...ons/Reference/
SafariJSRef/Classes/Canvas.html>
<http://developer.mozil la.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>Signatur e Test</title>

<script type="text/javascript" src="excanvas.j s"></script>
<script type="text/javascript">
/** Initialize canvas, assigning event handlers. */
function init() {
var canvas = document.getEle mentById("signa ture");
canvas.started = false;
canvas.onmoused own = function(event) {
var ctx = this.getContext ("2d");
var pos = getMousePositio nInElement(this , event);
ctx.beginPath(p os.x, pos.y);
this.started = true;
}
canvas.onmouseu p = function(event) {
if (this.started) {
var ctx = this.getContext ("2d");
var pos = getMousePositio nInElement(this , event);
ctx.stroke();
ctx.closePath() ;
this.started = false;
}
}
canvas.onmousem ove = function(event) {
if (this.started) {
var ctx = this.getContext ("2d");
var pos = getMousePositio nInElement(this , event);
ctx.lineTo(pos. x, pos.y);
ctx.stroke();
}
}
}
/** Retrieves elements position on the screen. */
function getElementPosit ion(element) {
var posX = element.offsetL eft;
var posY = element.offsetT op;
try {
while(element.o ffsetParent){
posX += element.offsetP arent.offsetLef t;
posY += element.offsetP arent.offsetTop ;
if(element == document..getEl ementsByTagName ('body')[0]){
break
}
else{
element = element.offsetP arent;
}
}
}
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 getMousePositio nInElement(elem ent, e) {
var elementPosition = getElementPosit ion(element);
var mousePosition = getMousePositio n(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 getMousePositio n(e) {
var x = (window.event) ? window.event.cl ientX : e.pageX;
var y = (window.event) ? window.event.cl ientY : e.pageY;
var mousePosition = new Array();
mousePosition['x'] = x;
mousePosition['y'] = y;
return mousePosition;
}
>
function test() {
var canvas = document.getEle mentById('signa ture');
var ctx = canvas.getConte xt('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,8 0);
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.quadraticCu rveTo(150, 150, 80, 80);
ctx.bezierCurve To(85,25,75,37, 75,40);
ctx.closePath() ;
ctx.fill();
ctx.beginPath() ;
ctx.rect(180,18 0,80,80);
ctx.rect(200,20 0,80,80);
ctx.stroke();
ctx.beginPath() ;
ctx.arc(200, 100, 20, 0, Math.PI, true);
ctx.stroke();
ctx.save();
ctx.translate(1 50, 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(1 0, 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(7 5,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_java...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** · Jun 27 '08, 07:13 PM

Re: Need JavaScript based drawing/signature box

On Jun 5, 6:10 pm, Tom Cole <tco...@gmail.c omwrote:

>
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><st yle>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.appendCh ild(w.canvas= d.createElement ("canvas"));
w.canvas.on= false;
c= w.canvas.getCon text("2d");
w.onresize();

w.canvas.onmous edown = function(e) {
c.beginPath(); c.moveTo(e.clie ntX, e.clientY);
this.on= true;
};
w.canvas.onmous eup = function(e) { this.on= false };
w.canvas.onmous emove = function(e) {
if (this.on) {
c.lineTo(e.clie ntX, e.clientY); c.stroke();
}
};
};
</script></head><body></body></html>

--Jorge.

**Jorge** · Jun 27 '08, 07:13 PM

Re: Need JavaScript based drawing/signature box

On Jun 5, 6:10 pm, Tom Cole <tco...@gmail.c omwrote:

(...) Maybe
it's just a matter of waiting for Opera and Safari to catch up (..)

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

--Jorge.

**javelin** · Jun 27 '08, 07:13 PM

Re: Need JavaScript based drawing/signature box

On Jun 5, 1:22 pm, Jorge <jo...@jorgecha morro.comwrote:

On Jun 5, 6:10 pm, Tom Cole <tco...@gmail.c omwrote:
>

(...) 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.

**Jorge** · Jun 27 '08, 07:13 PM

Re: Need JavaScript based drawing/signature box

On Jun 5, 8:49 pm, javelin <jmevalen...@gm ail.comwrote:

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

Ja-ja-ja.

Change line # 14 :

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

to:

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

--Jorge.

**Tom Cole** · Jun 27 '08, 07:13 PM

Re: Need JavaScript based drawing/signature box

On Jun 5, 2:22 pm, Jorge <jo...@jorgecha morro.comwrote:

On Jun 5, 6:10 pm, Tom Cole <tco...@gmail.c omwrote:
>

(...) 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(p os.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!

**Jorge** · Jun 27 '08, 07:13 PM

Re: Need JavaScript based drawing/signature box

On Jun 5, 9:05 pm, Tom Cole <tco...@gmail.c omwrote:

>
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><sc ript>
window.onload= function () {
var b, c;
c= document.create Element("canvas ");
c.height= c.width= 10;
b= c.getContext('2 d');
alert(c.toDataU RL('image/png'));
alert(c.toDataU RL('image/jpeg'));
};
</script></head><body></body></html>

--Jorge.

**Jorge** · Jun 27 '08, 07:13 PM

Re: Need JavaScript based drawing/signature box

On Jun 5, 9:05 pm, Tom Cole <tco...@gmail.c omwrote:

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><sc ript>
window.onload= function () {
var b, c;
c= document.create Element("canvas ");
c.height= c.width= 10;
b= c.getContext('2 d');
alert(c.toDataU RL('image/png'));
alert(c.toDataU RL('image/jpeg'));
};
</script></head><body></body></html>

--Jorge.

**Tom Cole** · Jun 27 '08, 07:13 PM

Re: Need JavaScript based drawing/signature box

On Jun 5, 3:29 pm, Jorge <jo...@jorgecha morro.comwrote:

On Jun 5, 9:05 pm, Tom Cole <tco...@gmail.c omwrote:
>

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><sc ript>
window.onload= function () {
var b, c;
c= document.create Element("canvas ");
c.height= c.width= 10;
b= c.getContext('2 d');
alert(c.toDataU RL('image/png'));
alert(c.toDataU RL('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.toDataUR L("image/png");
--alert(dataURL);

**Tom Cole** · Jun 27 '08, 07:13 PM

Re: Need JavaScript based drawing/signature box

On Jun 6, 8:20 am, Tom Cole <tco...@gmail.c omwrote:

On Jun 5, 3:29 pm, Jorge <jo...@jorgecha morro.comwrote:
>
>
>
>
>

On Jun 5, 9:05 pm, Tom Cole <tco...@gmail.c omwrote:

>

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><sc ript>
window.onload= function () {
var b, c;
c= document.create Element("canvas ");
c.height= c.width= 10;
b= c.getContext('2 d');
alert(c.toDataU RL('image/png'));
alert(c.toDataU RL('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.toDataUR L("image/png");
--alert(dataURL);- Hide quoted text -
>
- Show quoted text -

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

Need JavaScript based drawing/signature box

Need JavaScript based drawing/signature box

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment