We Keep Coding

Very long delay loading tiles on panning, but they load immediately when zooming

I have a strange problem with Google maps and it is happening with all the 3.X versions I tried. When I am panning the map the new tiles do not load, when I zoom (in/out - does not matter) - they load as expected. If I leave the page alone the missing tiles start loading after a very long delay - over a minute. I used Fiddler to check if there are any hanging requests - I found none - when sent they return quickly, so there is no networking problem involved. I noticed also that the standard controls (the zoom control) load with the same delay as well. This is happening in both IE and Chrome, I decided there is no point in trying it in other browsers - it is obviously something common.
Everything else works - I am showing lines and polygons, even editing them and reading back the edited vertices, however this affects also things like markers and I am receiving a DOM exception for them (with the same long delay).
Unfortunately it will be very difficult to pass any source code along. I am using the maps in a very complex windowing plus data binding javascript environment and I blame it for the issue, but all the diagnostics I have made show no problem anywhere. I debugged the application and there is not even a trace of a problem, delays cannot be caused by the environment (It is my work, so I know it from top to bottom) and the only possibility for a mix up I can imagine lies in some methods I am attaching to the Function object - otherwise there is no spot where the both can possibly collide. The strangest thing is the delay - if it broke I'd probably have already found it.
Any similar problems, anyone? Even a description of the problem under different circumstances may prove helpful I suppose. I searched for any similar issues, but found nothing of the sort.

html canvas animation stutter

Can anyone explain why the provided canvas animation stutters? I've created a test stub which demonstrates the problem.
I see the stutter in FF, Chrome, IE on desktop and in FF and Chrome on Android.
Is the stutter due to garbage collection? It seems even raf generates a double on each call which eventually requires gc. If gc is the cause then html5 animation is pretty much doa. Sigh.
The same question was asked a year ago but because I'm a new member I'm not able to contact the author to find out his solution. HTML5 Canvas DrawImage Stutter / Choppiness . It is really too bad there is no way for a new user to get another user's attention, since the author of that other question may have the information I'm looking for, an simply hasn't posted it. I tried posting to his question in an effort to get his attention, but my post there was deleted as a rules violation(which is was). Guess I'm out of options. Chicken and egg problem with rep.

Ok, so after pulling my hair out for 1.5 days I think I have an answer. It appears browsers vsynch to a monitor, which I guess is the point of calling requestAnimationFrame. It appears the synch mechanism can get confused when running on a multi monitor system. I have three monitors. When I disconnect all but one monitor and restart the browser, the problem appears to go away. This kind of makes sense given that the problem manifests sporadically, ie I'm guessing when a given monitor gets out of synch with which ever monitor is providing vsynch to the browser.
Since I'm not certain about this I'm hoping others can confirm or shoot down my theory. I'll continue to (re)test with different monitor configurations, but it would be nice to get confirmation from another brain and set of eyes.
Edit 01: I'm not completely nuts. http://news.softpedia.com/news/Firefox-Nightly-Adds-Support-for-Vsync-for-Smooth-Animations-360245.shtml
Edit 02: Some chrome users/devs has discovered this or a related problem. Finally something might be done with this issue. See https://code.google.com/p/chromium/issues/detail?id=422000. BTW, IE11+ does not have this issue. Started using IE11 for baseline testing, since chrome is having QA issues lately.
Edit 03: Just ran across this q&a which is similar. Good info in the first answer. Chrome requestAnimationFrame issues

Performance issues with HTML to canvas, where to begin?

I have been working on an experiment to render HTML into a canvas image, by having javascript read all the necessary information from the loaded DOM. As canvas lacks many of the standard parts of CSS, especially when it comes to text formatting, a lot of work arounds and performance intense processes need to be done (letter-spacing for one). The intent is and never will be to make a fool proof HTML renderer, as it simply won't be possible, but instead try and make as accurate as it can be.
For the sample pages, Google Chrome usually loads them significantly faster than FF. However, for some pages (usually the bigger ones), Chrome completely freezes, where as Firefox loads them fine. Now, I have been trying to pinpoint where exactly things go haywire, but haven't had much luck as it doesn't end up outputting anything in Chrome.
Does Chrome have some limit of how many canvas draws can be performed within a certain time span, or how much system resources a page can use? How can I start untangling the bottleneck if I can't get any sort of feedback from the page at all (as it just hangs up)?
Examples (what it should do, is render a canvas image on top of the page, which should look more or less same than the actual HTML page. You can toggle the canvas image (show/hide) by clicking it. Please don't open them either if you got unsaved work in your browsers, as it may end up hanging them as well.):
simple test, works fine in FF/Chrome
another simple test, works fine in FF/Chrome
Complete page, works fine in FF/Chrome
Complete page, only works in FF < 4, Chrome freezes
They all use the same js which can be found here.
I am not looking for a blazing fast script, as with the type of emulation this renders the images, I don't think it could even be done. Simply trying to find ways to make it perhaps slightly more efficient, without losing any of its current functionality.

Where to begin?
Break it down.
Use the same example and cut how much you do it it (your rendering code) in half. Does it still not work? In half again, etc. Did it work? Put back half of what you took out.
As in, get rid of all attempted text rendering, or all border/padding code. Just comment it out. Does it work then?
Or try just commenting out ctx.drawImage(img,x,y); on line 199 and nothing else. Does it work then?
If you're lucky you'll be able to determine a critical point where Chrome is spending a lot of time doing something.

Have you tried using Chrome's built-in performance profiler?

The problem appeared to be with the css attribute background-repeat, and specifically repeat-x. Commenting out
for(bgx=(x+background_position_left);bgx<=w;){
drawImage(image,bgx,(y+background_position_top));
bgx = bgx+image.width;
}
Fixed the issue at least for chrome, and looking at that it most likely was an endless loop as Kinlan proposed, but why exactly it gets stuck only on newer versions of FF and chrome is something I'll need to look more in detail (most likely not having the image.width available yet, or something similar).

Tearing in HTML5 canvas?

I'm making a small game using the HTML5 canvas element. It works great, except that it has a scrolling background with obvious tearing happening in Firefox and Chromium browsers in Ubuntu. I'm pretty sure it's buffered because there isn't any of the flickering I'd expect; just tearing. Is there any way to work around this or time rendering to right after the last screen refresh?

Currently there is no way to control the actual repainting of a canvas element(which if there was, could actually help in increasing performance I guess). So one can only hope that the browser actually does something intelligent, rather than screwing up like in your case.
I myself have quite some experience with the canvas element and know of its quirks. I ran into some kind of "repaint lag" several times by now, where obviously the actual numbers behind the scenes are correct and "smooth", but the graphics still have a somewhat "jumpy" behavior, which in fact is really annoying.
Only thing I can imagine that could have an effect in your case, is activating VSync in the driver settings of your Graphics Card.
If you'd like to provide a link to your game that might be helpful too, since I'm also running Ubuntu here.

Javascript Game: What should i know?

I am thinking as a challenge i should write a javascript based game. I want sound, images and input. A background to simulate a screen (like 640x480 with all my images in it) would be useful to separate the rest of the page from the 'game'. What should i look at?
Some things i would need
Framecontrol. A way to get the current time (or delta).
Image, displaying it and moving it. How do i display full image. Knowing pixel access may be cool.
Input A way to lock it in a box (like flash does) is cool.
Sound play simple sounds on demand (like when i get a hit). Several sounds at once would be great
Bottlenecks. What are things that will kill the CPU?
Restrictions. What cant i do? I hear i cant 'sleep' to wait. I must set a callback
Good or best pratice. What are good things i can do to either keep speed up or to lower glitch or compatibility problems.

I'm going to answer this looking at things from a mootools javascript perspective:
Framecontrol. A way to get the current time (or delta).
periodical()
Image, displaying it and moving it. How do i display full image.
setStyles()
Input A way to lock it in a box (like
flash does) is cool.
Plain old CSS
Sound play simple sounds on demand
(like when i get a hit).
Swiff, remote();
Bottlenecks. What are things that will
kill the CPU?
Internet Explorer.
Restrictions.
3D ... ?
What are good things i can do ... to
lower glitch or compatibility
problems.
Use a framework.

As a starting point, you may want to write it for Opera, as Opera provides a game canvas that will help you out.
For some examples of games in javascript:
http://dev.opera.com/articles/view/3d-games-with-canvas-and-raycasting-part/
http://my.opera.com/WebApplications/blog/show.dml/200788
This one is interesting, it is demos of games using the canvas element.
http://www.canvasdemos.com/tag/games/
The best way to see where the problems are is to start writing the game, and then you will see what may be a problem. By looking at demos you can get an idea what performance issues they encountered. For example, a full 3D Doom game will have problems, but, as the first article above explains, there are some ways to optimize for javascript.
Once you get it working with Opera, then you can look at Firefox 3.5+ and Safari, as well as Chrome, and see if you can make some changes to have it work on those. How many platforms it works on depends on how much work you want to do for it. For a proof-of-concept pick the easiest browser for your task.

The best place to start would be to get very familiar with the <canvas> tag (it allows you to draw anything on screen)
This may help a lot:
http://benfirshman.com/projects/jsnes/
its an online NES emulator that renders everything on screen - the source is also available
Hope that helps =)