I want to save my canvas-content to a single image-file. There are an approach using todataurl(), which works fine. But not if i draw an image-file (e.g. car.jpg or house.png) to the canvas additionally. It does not return the whole image? Here I have my simple example-code:
[Code]...
I have the following html file
[Code]...
Now this code works on ios safari 4.2 and later but i can't get it to work on ios safari 4.1. On 4.1 it displays the canvas but will not draw the image. The debug console shows no errors. Is there anyway to get it to work, or is 4.2 the cut off point for even the most basic canvas operations?
I am trying to create an Asteroids type game using JavaScript along with html5's canvas element for drawing. I have searched around and have looked at examples but I can't figure out what is wrong with my rendering that I do in the game loop that is run every frame. The problem appears to be only that the canvas is not cleared at the beginning of each frame but I feel there might be something wrong also. The code used and shown below only works in Firefox but not Google Chrome or Safari.
[Code]...
I'm trying to figure out how to add images to a canvas element. I found a good site, but for some reason my images turn out bigger than expected.
Here's what I use (It's from different functions in different places, but essentially that is the relevant code). Assume there is a gameObject which has all the functions that I use. I tried replacing the functions with constant values but that made no difference:
PHP Code:
Somehow the image shows up much bigger than 69 pixels width and height. When I make the canvas smaller the image scales down with the canvas. So when I make the canvas twice as small, the image becomes twice as small as well. Seems like it is not using pixels as units.
Picture:
Doing in html5 canvas, so JavaScript (was not sure where to post, but here I go...). Above is a link to picture that I need to do. It is clock-like. I will have to draw a circle, and two lines, from centre to according points on circle. That is not a problem, the thing I can not do is to fill upper and lower parts of circle that those two lines divide, so upper part of a circle should be e.g. red, and lower blue. (Plus, it would have to bi gradient, to look more appealing).
I am trying to get a function to draw 5 randomly sized and colored rectangles nested within each other. Meaning each rectangle should not go outside the boundaries of the rectangle it is in. The color thing I've got down in a randomColor() function. It's the nesting rectangles inside rectangles that is confusing me (hense me being up for the past 4 hours trying to understand it) I started out with very simple code just making 5 rectangles of reducing sizes nested in each other, then added the Math.random to randomize all the sizes. Now I'm at this point and have lost my way. I added a bunch of comments in my code so maybe you'll understand what I'm trying to do.
[Code]....
Is it possible to trigger mouse events with shapes drawn in an HTML5 canvas? I want to create a page with drawn elements that you can mouseover and pop up a dialogue box. I also want the shapes to react with some type of feedback. I'm hoping I can do this with javascript instead of Flash but haven't found a way to do it that's simple enough to make it worth it.
View 1 Replies View RelatedI want to be able to place an image on the canvas and have an onclick event for that object.
Code:
<!DOCTYPE html>
<html>
<head>
[code]....
How do I convert an image or datauri to canvas? I see the other way at [URL], but I also want to find out how I can create a canvas at the first place.The reason I ask this question is because I would like to create a little app that lets user create a canvas 'image', save it as something and be able to reopen it for canvas modification in the future. I figured that datauri is a good way to save a canvas, but I am not sure how I can do to reopen the datauri and use canvas to modify the drawing.
View 1 Replies View Related Here is a link of what I currently have for an image-fade slideshow so far. However if I can I'd like html5+css3 to handle the fade effects instead of depending as heavily on jquery and js. Using the browsers own fade rendering will lighten that load.Link to what I have currently:
http://sympa.me/CHRISTOPHER/index.html .Link to some somewhat working examples.
http:[url]....
I want to delete some lines on the canvas that i have created in HTML5 (with the <canvas> tag). I know one solution and that is using clearRect() (give this function the HEIGHT and WIDTH of the canvas and you clears the whole canvas.).But i don't want to clear the whole canvas, i only want to delete a few lines made by the function lineTo().
View 1 Replies View RelatedI have a menu in which is applied typeface script. Typeface 0.11 version doesn't support hover on links. There is an experimental version but doesn't work very well for me, so i tried to implement hover by myself.
Problem is: hover works pretty well changing canvas context property fillColor and then calling fill(), but the stroke on hovered voice remains on another color. Difficult to explain, so i put some test code online: TEST CODE As you can see, passing with mouse on the menu voices triggers the hover and the element change, but remains bordered in red.
[Code]...
do you know if it is possible to use selectors for a video tag?For example:
$(this).find('div.misc').find('ul').addClass('thumb-fila').find
('li').find('video').each(function(){
});
I'm trying to write a site a hosts some of my own videos. I want to have a list of videos, each as a link, and when I click on one I want it to load on that same page by graying out everything else but the video. I'm using html 5 and css and I can get the video to come up, but the problem is that when I go to that page, all of the videos load. If I play a video from the pop up window and then close the window, the video will keep playing.
View 5 Replies View RelatedI been working with a simple slideshow script and everything works fine, however I am testing for html5 validation and all but pass except the script calls for img name but in html5 you have to use id now for images. I have tried adding
[Code]...
I can play a sound on my local machine, but when I upload to a server the same code it does not play. I cannot work out why, the link below gives the code. The multi channel code is here:
[URL]
I installed Firebug and insepcted the Net components and can see that the .wav files are being ought out but returning a 304 and then 404 error. This would be fine, however the path being sought is correct. Going to link does'nt play the sound, but removing the file and paring back to the directory brings you to the directory on the server and clicking the file does play the sound. The code works locally, and I simply cannot see what could be causing the issue in the server versions on both Firefox and Chrome.
I'm trying to learn js &html5. now i have an issue. i'm working on a dice game (craps) using the html5 <canvas>. my dice are working fine but every time i click the "roll" button the page reloads which resets my form. the form provides feedback about the rolls. it includes the output of the counter variable, and win, lose, or shoot again info.
Html5 can be viewed at
Here is some of the js. if you need it all i'll post it later - just let me know.
Fyi- if i take the call to fxInit() out of the body tag in the html5 the canvas does not persist, it blinks with every (roll) onClick Event
I have used ie9 js debugger and it steps through flawlessly every time 4-5 counts .
var firstTurn = true;
HTML5 brings two new methods to the js selector API: querySelector() and querySelectorAll(). These methods can be used to match elements against a group of selectors. I think, a lot of the functionality overlaps with jQuery selectors. My guess is that these new methods will be a few times faster than jQuery selectors because they are natively implemented. My question is, how will jQuery use these additions to the js selector API? Will jQuery selectors just encapsulate these new methods? If so, is this work in progress or..
View 1 Replies View RelatedIn an HTML5 document I have a form code...
At the bottom of the form, I have a submit button that calls Javascript validation code...
Result: Error: document.ContactForm.submit is not a function
If I place a page from another site in this site and modify it as needed to work with the cgi document, everything works. Then I can copy the validation code that worked into the HTML5 page and it fails.
The only difference I can see is that one page is XHTML Transitional and the other is HTML5 so apparently there's a trick I don't yet know about using Javascript and HTML5.
i,m trying to make an application with JS and html5 i have tryed to make a google map who loads my position and let me choose a target positioni got it to work but sudenly the map have stoped loading as it shud i need to tilt my phone to get it to load the full map and i can`t figure out what i have done wrong:(
<!DOCTYPE html><html>
<head>
<title>Sigvartsen</title>
[code]....
i am using phonegap and html5 in my webapp, the problem is when i try to use the html5's FileReader it conflicts with the phonegap's FileReader object.. it's as if when i invoke the FileReader in html5 the one that is being called is the FileReader of phonegap.. any workaround?
View 1 Replies View RelatedIs there a way to build a playlist's video in html5 and javascript ?By now I've found [URL] and [URL]but I'd like to know your opinion as well
View 2 Replies View RelatedI am planning to create a web site in HTML5 and Javascript for iPad, for that perpose i need a local database access using javascript. I have installed SQLite on iPad, How i can access Sqlite using javascript.
Points i dont want to implement are: 1] I don't want to use HTML5 Local database storage as it cleans data whenever we clear history and caching. 2] I don't want to use Google gear, becoz it creates dependancy, also i have never used it. Is it possible to access SQLite using pure javascript. so that it will work with all the browsers and also on iPad as well as on XP, Vista machines.
I worked on this website :[URL]and cannot find out why it does not work in IE while it works in other browsers. The small video does not play while the sound does. As far as I can see it works fine in FF and Chrome.
View 1 Replies View RelatedI have a very important question. I am currently attempting to create a Javascript file to test the HTML5 File API. First of all, I want to dynamically obtain a local file using Javascript and Google Chrome. I have succesfully done that by using a function which returns a XMLHttpRequest() object. However, when I try to access the content of it, I get empty space.
[Code]...
I am trying to catch keypresses in my canvas tag, but it appears that
that is not valid.
I may try to just create a hidden input box that will allow me to catch
keypresses.
I am trying to write a very simple asteroids game for a presentation on
Ajax in July, to show that javascript can do more than it was able to a
couple of years ago.