Canvas Script

Discussion in 'Javascript' started by Tyrone Slothrop, Aug 9, 2011.

  1. I have created a copy of this example:
    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?

    Tyrone Slothrop, Aug 9, 2011
    1. Advertisements

  2. In comp.lang.javascript message <[email protected]
    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.
    Dr J R Stockton, Aug 10, 2011
    1. Advertisements

  3. 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, Aug 14, 2011
  4. 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. ;-)
    Tyrone Slothrop, Aug 14, 2011
    1. Advertisements

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.