Welcome to iPadForums.net Guest - Click Here to Register

HTML Canvas and the Ipad

This is a discussion on HTML Canvas and the Ipad within the iPad Development forums, part of the iPad App Store category; Hello everyone, I am trying to develop a web site that needs an HTML5 canvas element where the user can create a drawing. This drawing ...

iPadForums.net is the original Apple iPad Forum! Registered Users do not see these ads. Please Register - It's Free!
+ Reply to Thread
Results 1 to 1 of 1
  1. #1
    iPF Noob
    Member #
    141441
    Join Date
    Dec 2011
    Posts
    1

    HTML Canvas and the Ipad

    Hello everyone, I am trying to develop a web site that needs an HTML5 canvas element where the user can create a drawing. This drawing is stored on a database. The site already works on IE6-8 (using FlashCanvas), IE9, Firefox, Safari, Opera and Chrome for Windows (I have not tested it on a Mac or Linux yet, but I assume I will get the same results as the windows versions of the browsers that are available in those OS's). Originally it only used mouse events. Then, I tested on the Ipad and it drew only a single spot and when dragging the finger through the screen, instead of continuing the drawing, the page scrolled. I did a little research and added touch events (touchstart, touchmove and touchend). It still does the same thing. The TouchStart, TouchMove and TouchEnd events do the same thing as the MouseDown, MouseMove and MouseUp events. The idea is that the same app should work on all browsers. The touch events did not affect the behavior on windows based browsers at all, which is a good thing.
    Here is an excerpt of my code (I cannot show the full code because of confidentiality reasons)

    This is inside the function that initializes the canvas:

    canvas.addEventListener("touchstart", touchStart, false); canvas.addEventListener("touchmove", touchMove, false); canvas.addEventListener("touchend", touchEnd, false); Afterwards I have all the functions declared:

    function touchStart(event){ //{function code here}
    }


    function touchMove(event){ //{function code here}
    }

    function touchEnd(event){ //{function code here}
    }
    Is there any thing I am doing wrong?
    How else can I keep the page from scrolling when the user is trying to draw inside the canvas?

    Thank you very much in advance for your help
    Last edited by shinaco; 12-26-2011 at 10:58 PM.

  2. Ads



Links

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Similar Threads

  1. Why is HTML5 Canvas Slow On The iPad?
    By MrFish in forum iPad Development
    Replies: 0
    Last Post: 12-20-2011, 02:57 PM
  2. HTML code for Ipad
    By lukemeyer in forum iPad Help
    Replies: 0
    Last Post: 07-25-2011, 03:55 PM
  3. iPad 2 Switcheasy Canvas Case
    By janfisher1 in forum iPad Accessories for iPAD 1, 2 and 3
    Replies: 1
    Last Post: 07-23-2011, 02:13 PM
  4. Switch easy canvas iPad 2 case
    By Toscana in forum iPad Accessories for iPAD 1, 2 and 3
    Replies: 2
    Last Post: 04-24-2011, 12:07 AM
  5. Canvas compatible ipad 2 dock
    By MatthewH12 in forum iPad Accessories for iPAD 1, 2 and 3
    Replies: 0
    Last Post: 04-21-2011, 10:47 PM

Search tags for this page

canvas element offset wrong on ipad
,
canvas on ipad html
,

html canvas ipad

,
html canvas on ipad
,

html5 canvas ipad

,
ipad canvas click
,

ipad canvas touchend

,

ipad html canvas

Click on a term to search for related topics.

Tags for this Thread