Canvas Script

[Tyrone Slothrop]

I have created a copy of this example:
http://devfiles.myopera.com/articles/649/example2.html
to which I have added a function which will generate the coordinates
of the drawing to a hidden field.

The client would like the continuation of the drawing of the line
should mouseout and mousedown are both true, that is if someone is
drawing and strays off the canvas and returns. In the example URL,
you can see (at least in FF) is you leave and return to canvas, a line
is created between the point of mouseout and mouseover when mousedown
is true. Since the purpose of the canvas script is to create a
signature, this is undesireable.

To fix the mouseout problem, I added a listener which terminates the
line onmouseout. However, I am at a loss as to how to restart the
drawing when pointer returns to the canvas. Since only one event can
be defined by addEventListener, it is not possible to listen for both
mouseover and mousedown.

Perhaps I am approaching this the wrong way. The intent is to remove
the connecting line when the pointer returns to the canvas. What
really is needed is a way to terminate and restart without having to
add another listener.

Anyone have an suggestions?

TIA

 

[Dr J R Stockton]

In comp.lang.javascript message <v4s047parfjon7uqaeee9eigsimctigp8h@4ax.

Perhaps I am approaching this the wrong way. The intent is to remove
the connecting line when the pointer returns to the canvas. What
really is needed is a way to terminate and restart without having to
add another listener.

Anyone have an suggestions?

As a palliative if nothing better turns up, you might be able to draw,
every 50 ms, a background coloured line along the inside of the border
of the canvas, so eradicating the offending line. It will of course
only work if exit and entry are on the same side.

Alternative possible palliative - put a thick dark border around the
inside of the edge of the canvas, and ask the user to keep within the
hole in the middle. Then most users will learn to stay on the canvas.

P.S. : I have read your page source. You can add Chrome (and, I am
told, IE9) to the "Good" list.

 

[Tyrone Slothrop]

In comp.lang.javascript message <v4s047parfjon7uqaeee9eigsimctigp8h@4ax.


As a palliative if nothing better turns up, you might be able to draw,
every 50 ms, a background coloured line along the inside of the border
of the canvas, so eradicating the offending line. It will of course
only work if exit and entry are on the same side.

Alternative possible palliative - put a thick dark border around the
inside of the edge of the canvas, and ask the user to keep within the
hole in the middle. Then most users will learn to stay on the canvas.

P.S. : I have read your page source. You can add Chrome (and, I am
told, IE9) to the "Good" list.

I am told that iPad and similar devices will also work, though my
Android has had some issues with it.

The thought about the thick border gave me an idea. Training people
how to do it right is not really an option when they are exposed to
this script once or maybe twice (and the user does not need additional
challenges after having answered nearly 100 questions). However,
adding another div around the canvas with a unique id might provide
the opportunity to add a second listener to reinitiate the drawing
tools. I don't have the time top flesh this out at the moment (my
wife seems to think I belong to her on the weekends) but, if the user
has the mousedown when crossing the containing div, the tool could
reintiate on mouseover the canvas. I think. Maybe.

Any comments or other (more feasible) thoughts?

 

[Tyrone Slothrop]

In comp.lang.javascript message <v4s047parfjon7uqaeee9eigsimctigp8h@4ax.


As a palliative if nothing better turns up, you might be able to draw,
every 50 ms, a background coloured line along the inside of the border
of the canvas, so eradicating the offending line. It will of course
only work if exit and entry are on the same side.

Alternative possible palliative - put a thick dark border around the
inside of the edge of the canvas, and ask the user to keep within the
hole in the middle. Then most users will learn to stay on the canvas.

P.S. : I have read your page source. You can add Chrome (and, I am
told, IE9) to the "Good" list.

I created a hack by adding 20px padding to the canvas block.
Originally, I had added a background and a border around the canvas in
the style sheet. In the revised version, I created a filled rectangle
with a stroke. Now, when the user leaves the edge of the canvas
within 20px padding, the line drawing will continue.

It is not a perfect fix, but it works. ;-)