HTML5 Scrolling and Canvas: Is the Trick Interesting or Useless?

Question

I already read all the scrolling:

Structuring HTML5 Canvas / JS Game

etc.:

• HTML5 Canvas Tutorial
• The Secret to Silky Smooth JavaScript Animations
• Google Search "HTML5 Scrolling"
• Canvas games
• Create a vertical scrolling game with an HTML5 canvas
• Math mayem
• CAAT JavaScript framework

(The latter is impressive, but even if almost nothing has been done, there is nothing about scrolling).

This is what I think, and I did not find anything of value in it. The idea only occurred to me, and I wonder if I should think a lot about it and try or not (that’s why I really ask here).

I plan to make a Mario scrolling game.

The big drawback of scrolling is that you need to redraw the entire background. I already avoided two problems with sprite / scroll performance: create two canvases on top of each other:

• background
• sprites

And just delete the sprites.

The problem is with the background: I am making a full copy of the background on the "visible" canvas. (note: there is no problem with flickering, because writing to JavaScript is a blocking operation, and all modern browsers handle vertical synchronization, so double buffering is not required).

Here is an old version of what I'm writing, but you get the big picture:

Check HTML5

Now I’m interested in scrolling: what if I do a “background div” instead of a canvas, with the appropriate CSS (background image for the background) and write fragments on the image directly, and then change CSS to simulate scrolling? Should it be faster? If so, why? Is there any good idea for this?

Answer 1

My final conclusion: after many attempts, including the Eirk Reppen proposal, I write “raw” directly to the hidden parts of the canvas and use CSS: all web browsers handle the flickering of the image and everything around it, and they already optimized everything.

Therefore, every time I tried to "optimize", the results were worse.

Web browsers seem to be made for the right basic stuff created by beginners ... perhaps because 99% of the HTML content is created by beginners.

Answer 2

On a semi-modern + computer with a semi-recent + browser, the fastest thing to do is probably take a super-long div with background images, set the overflow to hidden and scroll by editing the scrollLeft or scrollTop properties. This is much faster than adjusting CSS properties, as it should not invoke recalculation calculations in the CSS engine. Basically, whenever you touch on the DOM property, which can be affected by CSS, the whole structure (or at least a lot) of the structure of the document needs to be re-checked and re-rendered.

You can load chunks of background as they get closer to avoid a giant huge image load. I don’t believe that there is a 100% sure way to get an image out of memory in browsers, but deleting links to it in the DOM or in your CSS will probably not hurt when you scroll far enough past part of your background. Thus, the browser garbage collector, at least, has the ability to clear memory.

In mobile solutions that rely on webviews (for example, Cordova / Phonegap) , however, it’s good why I came to this question.

I have no idea, but I'm sure mixing HTML and canvas is a disgusting idea for performance. Right now I have a non-super-complicated android game, choking on 50x50 100px tiles in the canvas element in the Android web view, which also has some basic HTML code in elements such as controls, and highlighting a couple of others canvas elements from rest. I basically have a bird-eye ship traveling around and scanning with a crappy radiation circle that shows elements on a map of the war nebula. Works great in a browser. A complete disaster in the version of the cordova application.

I suspect that the only way I'm going to implement my mobile game is to use one of the many openGL-wrap-in-a-canvas-API solutions and completely align the HTML, which I find damn convenient for implementing the user interface, given that the bulk of my experience is with the web interface. Another general tip for the HTML representation of web pages is to avoid scrolling inside the internal elements if you can (so just let the body handle the overflow). Overflow scrolling in everything except the body didn't even work in Android 2 web browsers, and it still seemed like this was causing 4.1 views to be throttled in an earlier / simpler version of the application I'm working on.

Answer 3

The fastest scrolling is CSS scrolling. Thus, you draw the whole background once, not only the visible part, but hide everything that is not visible, and use css to scroll (margin or position). No redrawing, only CSS changes. This job is really the fastest. But if all the cards are really huge, other custom ways might be better.

Answer 4

Below is a demonstration of scrolling an oversized canvas by changing the CSS field, which is based on scrolling over time: https://jsfiddle.net/6othtm0c/

And this version with drag and drop: https://jsfiddle.net/ax7n8944/

HTML:

<div id="canvasdiv" style="width: 500px; height: 250px; overflow: hidden"> <canvas id="canvas" width="10000px" height="250px"></canvas> </div> 

JS for the scroll version over time:

 canvas = document.getElementById("canvas"); context = canvas.getContext('2d'); for (var i = 0; i < 1000; i++) { context.beginPath(); context.arc(Math.random() * 10000, Math.random() * 250, 20.0, 0, 2 * Math.PI, false); context.stroke(); } var t0 = window.performance.now(); setInterval(function(){ canvas.style.marginLeft = -(window.performance.now() - t0)/5 + "px"; }, 5);