I've made a simple HTML5 noughts and crosses(tic tac toe) game that uses the canvas element and I am trying to use phonegap to get it working on Android. I've test it works fine on firefox, chrome and internet explorer but when I get built using phonegap the apk produced simply renders a white screen.
I've tried using the ripple emulator and it renders and behaves as expected fine. Really confused as to why its not working.
To work on pc instead of phoengap you have to change
document.addEventListener("deviceready",onDeviceReady, false);
to
document.addEventListener("DOMContentLoaded",onDeviceReady, false);
in main.js.
I am using fast-canvas as a plugin, see the config file.
Code is avaliable here as well as assets here: https://github.com/JacobRawling/XandOs
Please help I am very confused and am struggling to find any phonegap tutorials that use
canvas.
Thanks very much
Your solution is jqscribble – A touch enabled canvas drawing tool
http://plugins.jquery.com/jqscribble/
Related
** See Edit 2 for the current solution to this issue. **
I have a somewhat obscure issue that Google and searching through StackOverflow hasn't solved yet. Paper.js isn't working through iOS.
Currently I'm building a whiteboard drawing web-app that utilizes paper.js for the drawing functionality. It's working just fine on the desktop in Chrome, FireFox, and Safari. On Android devices it works fine, but is quite laggy. The problem crops up when using the app on iOS devices.
For some reason it is not possible for my app to create paths when using it on iOS through mobile Safari or mobile Chrome. The behavior on iOS is just a non-responsive canvas.
I currently don't have access to a device that I can use for remote debugging, so I am not able to gather any useful debugging data.
Web app link for testing.
http://alexpersian.github.io/html/whiteboard.html
Code snippet of paperscript involved in drawing.
var myPath;
function onMouseDown(event) {
myPath = new Path();
myPath.add(event.point);
myPath.strokeColor = WBAPP.penColor; // WBAPP is from main Javascript
myPath.strokeWidth = WBAPP.penStroke;
myPath.strokeCap = 'round';
}
function onMouseDrag(event) {
myPath.add(event.point);
}
function onMouseUp(event) {
myPath.simplify();
}
Edit: I've completed some further testing and found that it works on devices running iOS 7, but not iOS 8. I'm curious if there was a change to iOS 8 that limited touchEvents web interaction.
Edit 2: I was able to solve this issue by adding this snippet of code.
document.addEventListener('touchmove', function(event) {
event.preventDefault();
}, false);
This prevents the default touch action on iOS 8, which seems to be a scroll/pan action, because it interferes with the onMouseDrag event from paper.js.
Jürg Lehni, paper.js co-creator, is looking into whether this should be included in the library itself. Until then, this snippet should help.
Hey probably you will need to implement touch events you can use
http://labs.rampinteractive.co.uk/touchSwipe/demos/ to do that
or
http://www.homeandlearn.co.uk/JS/html5_canvas_touch_events.html
I'm trying to record video using html5 .getUserMedia and then play it again without upload to the server. I have tried many tutorial and I made it work in Chrome by using canvas to draw the webp image and then convert to the webm by using Whammy.js . But the problem is it did not work on Firefox that unsupported webp. I just want to make it work in Firefox.
Any idea possible to do that?
Thanks
intrestingly firefox supports direct webm recordings, have you tried RecordRTC,
you can check the demo here.
I'm running code that looks for an event trigger based off of drawing on the html5 canvas. Once you stop drawing it sends the dataURL to a input field. From there I save the dataURL to a database.
This works for the following:
Andriod Pads that are running version "icecream sandwhich"
Ipad
PC
MAC
It does not work on the following tablets:
Kindle Fire
Android Pad running "honeycomb"
here is my code to put the dataURL into the input:
document.getElementById("dataURLCode").value = canvas.toDataURL();
on the ones that works, the output in the field is something along the lines of:
data:image/png;base64,iVBORw0K...
for the ones that do not work the output code is just this:
data:,
Things I've tried to clear the cache and history. I'm trying to stray away from using a different browser other than the default one due to we are making this product for cross platform and we need to have it working for all tablets and their default browsers.
I've also pulled a dataURL into the input field no problem by copy/paste, it just cant pull using the canvas.dataURL
I'm assuming the browsers do not support this part of html5 but I'm up for other assumptions.
Thanks for the help.
Some version of Android have problems with toDataUrl(); Here you can find an easy solution:
http://code.google.com/p/todataurl-png-js/wiki/FirstSteps
The script: http://todataurl-png-js.googlecode.com/svn/trunk/todataurl.js
Paste this in your head:
<script src="todataurl.js"></script>
I have built an game using HTML and javascript that I want to turn into an ipad app.
I have been following this "Creating a native 'Objective-C' app" section of this guide: http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/
However, when I run the ipad simulator in Xcode, the "ipad" comes up, but it just shows a blank screen.
I took out all my code in my html file and just put in a couple of lines of html. When I change the background color, this does show in the ipad simulator.
However no text shows up.
Does anyone know what I'm missing?
I am using Xcode 3. Also, I have already taken my javascript file out of "compile sources" and placed it into "copy bundle resource".
I don't know about your problem but an easy way to create an HTML/JS app is to use PhoneGap. Plus you can bring your app to other OS like Android an a PhoneGap project is really easy to set up.
http://phonegap.com/start
Im trying to make a HTML5 signature capture in Javascript.
It works already but i got a problem running it on Android.
The function canvas.toDataURL(); does not work on Androids standard browser.
Does someone know an alternative for saving a Canvas to an image(png)? Or making it run on Android?
Take a look at Hans Schmucker's workaround/reimplementation:
http://forum.xda-developers.com/showthread.php?t=1251575