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>
3 Answers
-
actually, nothing gets run in the init function. I've added an alert but it isn't showing. :|
-
<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(); }
-
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?