I am experimenting with html5 and I have a little image dropdown, the user selects and image and it draws it to the canvas using drawImage(); I can't seem to figure out how to add an event listener to the newly drawn image on the canvas. I have tried putting it in a variable like so: var newImg = ctx.drawImage(myImage, 200, 200); an...
In HTML5, CSS selectors seem to operate well with data-* attributes. For example: <style> div[data-foo='bar'] { background:#eee; } </style> <div data-foo='bar'>colored</div> <div>not colored</div> will properly style the first . But, attempts to select such elements using the selectors-api fail. Examples: var foos = document.queryS...
I've been testing out the new functionality of html5 and js to create a sketching site. I've been looking into this for a possible client that wants their site to be ipad accessible, but also have drawing features on it. So i created a rough experiment where you can drag your mouse across a screen to draw lines. I went to test it on an ...
Rehashing an older post: http://stackoverflow.com/questions/1570070/jquery-vs-flex-choosing-a-platform-for-saas We are preparing to develop an application that is exceptionally dynamic and interactive. It's particularly heavy on the graphics side. We are 85% convinced that Adobe Flash built atop Flex is the right path to take, however...
Hi. Can anyone help me: I'm trying to put a div (say, 10px by 10px) element on top (in front) of a canvas element (say 500px by 500px) in html. I have tried changing the z-index of each, to no avail. Does anybody have any ideas, or is it one of those things that you can't really do? I already know how to do absolute positioning and every...
Hello there. I'm trying to put an x-repeat "grid" of images by using background-image in CSS, then using the id in a DIV tag. My intention is to put a sort of "panel", then always extends to the very top of the page, and loops with repeat-x. It works just fine without a DOCTYPE, but when I put the clean in the code, it pushes the image...
Hi all, I am writing a tutorial about the HTML5 Canvas for mobile and did some basic tests. While I can call the getDataURL() Method on an iPhone's HTML5 Canvas Element, it does not seem to return the data URL on Android 2.1 (Google Nexus One) and it's webkit-based default browser. Here is the sample: var dataURL = canvas.toDataURL();...
I'd like to start using HTML5's basic features, but at the same time, keep my code backwards compatible with older browsers (graceful degradation). For instance, I'd like to use the cool CSS3 properties for making rounded corners. Is there any available tutorial for writing gracefully degradable HTML5 ? Additionally, what browsers shoul...
I am looking at using HTML5 Canvas element for my upcoming project. I want to know what all major browsers (including the versions!, cos i know that the latest builds do support canvas) support the Canvas tag. I don't give a damn about IE. So don't bother reporting IE. :) In this tutorial Drawing shapes - MDC, the quadraticCurveTo secti...
drag and drop file attachment to browser, how do they do it? It seems gmail just starting this feature, and it doesn't require you to install any plugin etc. it works in both firefox and chrome but not IE. ...
I'm trying to figure out how to rotate a single object on an html 5 canvas. For example: http://screencast.com/t/NTQ5M2E3Mzct - I want each one of those cards to be rotated at a different degree. So far, all I've seen are articles and examples that demonstrate ways to rotate the entire canvas. Right now, I'm guessing I'll have to rota...
To clarify the weird title. I am trying to use figure out if there is a way, either by javascript or some other means, when the user is presented with a standard text keyboard to listen for the keyboards action like 'GO' or 'Search'. This button is in the bottom right corner of the keyboard used in Safari on the iPhone. This is NOT a ...
I'm looking for a good fallback for both HMLT5 and CSS3 so I could use it and it would still look ok in other browsers. Thanks ...
I see a lot of talk how HTML5 video tag will kill Flash. But while video is the most widely used part of Flash/SL, it's only a small part of their technical abilities. For instance you can write a game using full 3D graphics and socket connections in Flex, and serious business applications, etc. Is the thinking that Javascript will kill...
Hi there, I am trying to use gwt-mobile-webkit, particularly its location api. It works well with iPhone (both device and simulator) and Firefox and on G1 with 1.6 Android, however, it does not work on G2 with Android 1.5 on it. In result I am getting onFailure callback with Permission Denied error. So it seems, that there is some geol...
I'll post a link since theres to much to post here: http://hem.bredband.net/noor/canvas.htm My goal is to make the picture fit inside the window with the width of the image being the same as the window, even after resize. If the pictures height becomes to big for the window then the picture should resize itself according to the height ...
I am very tempted to use long wait http or periodic polling by the client to set up pseudo-sockets on the browser side, for an application that would be used publicly. But then on the 2nd thought, I am thinking HTML 5 is here. But on the 3rd thought, what is the percentage of browsers out there that remain non-HTML5 within 12 months, 2...
My question is, what is the best way to tint an image that is drawn using the drawImage method. The target useage for this is advanced 2d particle-effects (game development) where particles change colors over time etc. I am not asking how to tint the whole canvas, only the current image i am about to draw. I have concluded that the glob...
I load an external image and draw it on the Canvas element like so: var canvas = document.getElementById('canvas1'); var context = canvas.getContext('2d'); var image = new Image(); image.onload = function(evt) { context.drawImage(evt.target, 0, 0); } image.src = "test.jpg"; But I want to get the ImageData. So after calling context.dra...
Hy there, I can't find enough beginner resources on the web about HTML5 database storage usage examples (CRUD) I'm opening(creating) my DB like this: var db; $(document).ready(function() { try { if (!window.openDatabase) { alert('Not Supported -> Please try with a WebKit Browser'); } else { ...