How to render Bitmap into Canvas?

Is the impact of the HTML5 Canvas in game development overestimated?

• The Canvas element certainly has its purpose, and whenever bitmap graphics must be generated or drastically modified at runtime, there simply is no better solution. I seriously started to doubt, however, whether, even for game development, there should be one major canvas, where all the action should happen. Refreshing a large canvas is a CPU-expensive operation. Why not stick to the DOM/CSS model that frameworks like jQuery have made miracles with, and use Canvas only for specific purposes? Since the Canvas is also a DOM element, it could be used for smaller abstractions such as sprites, etc, and moved around just like every other DOM element.

• Answer:

  I've seen both methods tried on the web platform. Runtime performance is key here. Developers like to use the canvas 2D drawing because it gives them complete control of the paint logic per frame. If you use the DOM API the compositing and painting is driven by the native browser engine which typically does not perform as well. Depending on the structure of your DOM and CSS, the render tree generated can be very complicated and make paints very expensive. An example: The Bespin programmers' text editor web application was originally written all in canvas 2D. Many web-based games on the webOS platform are written in canvas 2D. Canvas refreshes are only expensive if you redraw them completely every time. If you do not need to update anything, the web browser just blits the canvas raster when doing its page compositing. Remember that if you are using Canvas the painting logic is completely up to the web developer. Another example: the calendar day view in webOS was originally written using DOM but the render tree generated was so complicated that runtime performance suffered. It was re-written as canvas to get smooth scrolling. The month and week views are DOM-based however.