canvas - performance of layered canvases vs manual drawImage() -


i've written small graphics engine game has multiple canvases in tree(these represent layers.) whenever in layer changes, engine marks affected layers "soiled" , in render code lowest affected layer copied parent via drawimage(), copied parent , on root layer(the onscreen canvas.) can result in multiple drawimage() calls per frame prevents rerendering below affected layer. however, in frames nothing changes no rendering or drawimage() calls take place, , in frames foreground objects move, rendering , drawimage() calls minimal.

i'd compare using multiple onscreen canvases layers, described in article:

http://www.ibm.com/developerworks/library/wa-canvashtml5layering/

in onscreen canvas approach, handle rendering on per-layer basis , let browser handle displaying layers on screen properly. research i've done , i've read, seems accepted more efficient handling manually drawimage(). question is, can browser determine needs re-rendered more efficiently can, despite insider knowledge of has changed each frame?

i know answer question "do both ways , benchmark." in order accurate data need real-world application, , months away. if have acceptable approach have bigger fish fry. i'm hoping has been down road , can provide insight this.

the browser cannot determine when comes canvas element , rendering passive element - in user rendered means of javascript. thing browser pipe what's on canvas display (and more annoyingly clear time time when bitmap needs re-allocated).

there unfortunately no golden rule/answer best optimization vary case case - there many techniques mentioned merely tools can use still have figure out right tool or right combination of tools specific case. perhaps layered in 1 case , perhaps doesn't bring case.

optimization in general in-depth analysis , break-down of patterns specific scenario, isolated , optimized. process if experiment, benchmark, re-adjust, experiment, benchmark, re-adjust, experiment, benchmark, re-adjust... of course experience reduce process minimum experience specifics comes in variety of combinations still require fine-tuning case case (given not identical).

even if find recipe current project not given work optimal next project. 1 reason no 1 can give exact answer question.

however, when comes canvas want achieve minimum of clear operations , minimum areas redraw (drawimage or shapes). point layers groups elements enable goal.


Comments

Popular posts from this blog

css - Which browser returns the correct result for getBoundingClientRect of an SVG element? -

gcc - Calling fftR4() in c from assembly -

.htaccess - Matching full URL in RewriteCond -