Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

no touch events in HTML5 canvas drawing in WebView

hello,

from pieces of code gathered from this board I've managed to get a small html5 canvas drawing working on the ipad emulator. However, it doesn't work on a real device.

I'm stuck on what to do, since the code works fine in the emulator.
any clues or leads would be appreciated.

thanks!

the code is the following:
canvas.js

    var newWebview = Titanium.UI.createWebView({
        top: 0,
        left: 0,
        width: "1024",
        height: "auto",
        url:'/index.html',
        backgroundColor: 'transparent'
    });

index.html

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0"/>  
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>HTML5 Draft Tool</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <style type="text/css">
        body {
            font-family: arial, helvetica;
            font-size: 11px;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body onload="init()">
    <canvas id="canvas" width="1024" height="700"></canvas>

    <script type="text/javascript"> 

    canvas = document.getElementById( 'canvas' );
    var context = canvas.getContext( '2d' );
    context.fillStyle = '#00f';
    context.fillRect( 50, 50, 200, 200 ); // be sure something is drawing into canvas

    function getPage(event){
        //when on mobile safari, the coordinates information is inside the targetTouches object
        if (event.targetTouches) event = event.targetTouches[0];
        if (event.pageX != null && event.pageY != null) return {pageX: event.pageX, pageY: event.pageY};
        var element = (!document.compatMode || document.compatMode == 'CSS1Compat') ? document.documentElement : document.body;
        return {pageX: event.clientX + element.scrollLeft, pageY: event.clientY + element.scrollTop};
    }   

    function onMouseMoveOnCanvas( event ) {

        if ( canvas.drawing ) {
            var page = getPage(event);
            var startX = page.pageX;
            var startY = page.pageY;
            if ( canvas.pathBegun == false ) {
                context.beginPath();
                canvas.pathBegun = true;
            } else {
                context.lineTo( startX, startY );
                context.stroke();
            }
        } 
        event.preventDefault();
        event.stopPropagation();
    }

    function onMouseClickOnCanvas( event )
    {
        canvas.drawing = !canvas.drawing;
        if ( canvas.drawing ) // reset the path when starting over
        {
            canvas.pathBegun = false;
        }
    }

    function init(){    
        context.strokeStyle = '#fff';
        context.lineWidth = 5;
        canvas.addEventListener( 'touchmove', onMouseMoveOnCanvas);
        canvas.addEventListener( 'touchstart', onMouseClickOnCanvas);
        canvas.addEventListener( 'touchend', onMouseClickOnCanvas, false );
    }



    </script>
</body>
</html>
— asked September 9th 2010 by Pedro Sousa
  • canvas
  • html5
  • ipad
  • touchmove
0 Comments

3 Answers

  • actually, nothing gets run in the init function. I've added an alert but it isn't showing. :|

    — answered September 9th 2010 by Pedro Sousa
    permalink
    0 Comments
  • <canvas id="myCanvas" ontouchstart="touchstartCanvas(event);" ontouchmove="touchmoveCanvas(event);"</canvas>

    function touchstartCanvas(e) {
        X = e.touches[0].clientX;
        Y = e.touches[0].clientY;
        e.preventDefault();        
    }
    
    function touchmoveCanvas(e) {
        X = e.touches[0].clientX;
        Y = e.touches[0].clientY;
            e.preventDefault();    
    }
    
    — answered October 2nd 2010 by Pankaj Patel
    permalink
    0 Comments
  • I have the same problem also tried the touchMoveCanvas thing but it won't work :S

    somebody else appearantly got this working, but indeed, the init() function never gets loaded for some reason.

    EDIT: when I put an alert('it does work); in the function init() in the html.

    then put it on a ipod touch, it loads the alert but it doesnt let me draw while it does on the simulator.

    so my init does get loaded now what is the problem?

    — answered October 5th 2010 by Patrick van Zadel
    permalink
    1 Comment
    • Make sure that you are using "touchstartCanvas(e)" and "touchmoveCanvas(e)" and not "touchMoveCanvas" with "M" capital.

      — commented October 31st 2010 by Pankaj Patel
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.