Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Need JavaScript based drawing/signature box

Reply
Thread Tools

Need JavaScript based drawing/signature box

 
 
javelin
Guest
Posts: n/a
 
      06-04-2008
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.
 
Reply With Quote
 
 
 
 
Jorge
Guest
Posts: n/a
 
      06-04-2008
On Jun 4, 4:59*am, javelin <(E-Mail Removed)> 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/documenta...ons/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.
 
Reply With Quote
 
 
 
 
Tom Cole
Guest
Posts: n/a
 
      06-04-2008
On Jun 4, 4:49*am, Jorge <(E-Mail Removed)> wrote:
> On Jun 4, 4:59*am, javelin <(E-Mail Removed)> 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/documenta...ons/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.
 
Reply With Quote
 
Tom Cole
Guest
Posts: n/a
 
      06-04-2008
On Jun 4, 4:37*pm, Tom Cole <(E-Mail Removed)> wrote:
> On Jun 4, 4:49*am, Jorge <(E-Mail Removed)> wrote:
>
>
>
>
>
> > On Jun 4, 4:59*am, javelin <(E-Mail Removed)> 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/documenta...ons/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.
 
Reply With Quote
 
javelin
Guest
Posts: n/a
 
      06-05-2008
On Jun 4, 3:37*pm, Tom Cole <(E-Mail Removed)> wrote:
> On Jun 4, 4:49*am, Jorge <(E-Mail Removed)> wrote:
>
>
>
>
>
> > On Jun 4, 4:59*am, javelin <(E-Mail Removed)> 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/documenta...ons/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.
 
Reply With Quote
 
javelin
Guest
Posts: n/a
 
      06-05-2008
On Jun 4, 3:37*pm, Tom Cole <(E-Mail Removed)> wrote:
> On Jun 4, 4:49*am, Jorge <(E-Mail Removed)> wrote:
>
>
>
>
>
> > On Jun 4, 4:59*am, javelin <(E-Mail Removed)> 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/documenta...ons/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_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
 
Reply With Quote
 
Jorge
Guest
Posts: n/a
 
      06-05-2008
On Jun 5, 3:36*pm, javelin <(E-Mail Removed)> wrote:

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


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.
 
Reply With Quote
 
Tom Cole
Guest
Posts: n/a
 
      06-05-2008
On Jun 5, 11:50*am, Jorge <(E-Mail Removed)> wrote:
> On Jun 5, 3:36*pm, javelin <(E-Mail Removed)> wrote:
>
> > 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.

>
> 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.
 
Reply With Quote
 
Jorge
Guest
Posts: n/a
 
      06-05-2008
On Jun 5, 6:10*pm, Tom Cole <(E-Mail Removed)> 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.


 
Reply With Quote
 
Jorge
Guest
Posts: n/a
 
      06-05-2008
On Jun 5, 6:10*pm, Tom Cole <(E-Mail Removed)> wrote:
> (...) Maybe
> it's just a matter of waiting for Opera and Safari to catch up (..)


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

--Jorge.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
div box questions; float text around a box, fit box to image size Gnarlodious HTML 4 05-05-2010 11:30 AM
Fill Combo Box based on another Combo Box dthmtlgod ASP General 1 11-16-2005 04:08 PM
Need to cancel a javascript alert/confirm box Tasha's Dad Javascript 5 11-09-2004 01:54 PM
Question: Writing text file based TestBenches vs. Waveform file based simulation. BLF VHDL 4 08-07-2004 12:44 AM
We need some help installing IP based CRM software.. IP based call center software Leveridge Systems INC C++ 1 05-13-2004 06:33 PM



Advertisments