1

Im Developing a open-source library which uses the Html5 canvas's graphic context to render a hierarchy of views. However i would like to make some performance optimizing allowing faster rendering of content that is fully opaque.

How could i implement such logics?

Do you know a good informative resource or tutorial on how to implement such system?

Currently i'm using a basic drawing model that is similar to and ui-kit and each view are representing a on-screen rectangular area. The render engine is implemented separately from the view objects, and rendering the content based upon a list containing dirty views that needs to be redrawn.

EDIT:

The library and current render-system
The library is a so called platform or abstraction layer upon the canvas elements ability to render graphics dynamically. I have at a current state implement the basics of managing the display list etc, but it's not optimized yet.

The current rendering engine is using buffers and is caching the drawing commands of a view so the view could be redrawn at later time. However there is a over hull in drawing coursed the need of redrawing of the a hierarchy when just one view is invalidated.

how do i implement a system to manage dirty rectangles of screen content?

Raweden
  • 319
  • 2
  • 5
  • IMO, HTML5's canvas is only for very simple things, due to its locking procedural nature. If you want something complex, you really need to utilize something like SVG, which is far more interchangeable and allows for significantly more complex operations than Canvas. – John Green Apr 16 '12 at 20:44
  • @JohnGreen-PageSpike: What most web developers don't know is that the canvas API can be used to render quite advanced stuff, the canvas offen backed by the GPU or software render (some not so good). I have render quite complex things using the canvas without a perforamnce hit, and the problem isn't that the canvas isn't supporting it, its that it have to re-implemented in JavaScript. Obviously there is algorithm for it, almost every drawing system is using such algorithm, even webkit is using a simular approach for redrawing html content.In the nature of this library the SVG can't be used. – Raweden Apr 16 '12 at 21:13
  • I've done significant research into Canvas feasibility. The biggest issue with it is that it is procedural javascript using a painter's drawing algorithm. If you want to draw something complex, you need to run through many slow, locking calls. Dynamically manipulating SVG is significantly more performant and more powerful. – John Green Apr 17 '12 at 05:12
  • However, to answer your question... the only way to manage dirty rectangles in Canvas (again, because of the painter's algorithm) is to break the canvas up from the outset, only draw into your pseudo-rects, and handle path splitting and other things that kill whatever perf canvas has. – John Green Apr 17 '12 at 05:13

0 Answers0