Crafty Blog - JavaScript Game Engine Development

Development of Crafty

0 notes &

Canvas Drawing for 1.0

If you have been following this blog you will know of all the different methods and areas researched to try and get some good performance from canvas.

I think I have finally found a solution that will be beneficial for all cases so I will post the general structure.

1. Any changed objects are added to a register
2. The dirty rect is calculated for each (based on area bounding old position and new)
    2.1. If the amount of dirty rects is over 60% of the total amount of ents, redraw everything
    2.2. clearRect on the main canvas of these dirty regions
3. Search for all entities in these dirty regions
4. Sort the list of dirty ents by the global Z
5. For Each dirt ent
    5.1. If it is rotated or is a repeating pattern, drawImage onto temp canvas
    5.2. Draw the region cleared from the temp canvas or its image

Confusing but necessary. It hasn’t been implemented yet but I predict it will make a world of difference. By checking how much needs redrawing we can calculate if a naive redraw (clear the entire frame and draw everything on stage) would be better.

There is another optimization I could make based on the previous post about drawing methods and that is to create a canvas object for every single canvas entity. This will very likely not be used however as the memory needed far outweighs the performance benefits.