CODEWITHSUNDEEP
javascripthtml5-canvas
lviggiani
lviggiani

Reputation: 6066

Efficient way of drawing objects in HTML5 Canvas

I'm completely new to HTML 5 Canvas, so I apologize in advance if I'm asking stupid question...

I've studied some basic example for implementing animations. All of those are not "object oriented" examples, meaning that there is a central draw() method which is called at regulr interval and clears & redraws everything each time. From the knowledge I have in graphic programming with other languages / toolkits, a more efficient way should be using an "object oriented" approach where every "object" on the stage has its own draw method which checks if the object actually need to be redrawn against an invalidated clipping region.

Does it make sense with canvas too in terms of performance and CPU load? Is there another more efficient approach (examples)?

Upvotes: 2

Views: 704

Answers (1)

Oleg Mikheev
Oleg Mikheev

Reputation: 17444

Not sure if it is efficient performance wise, but Dojo GFX is very efficient development wise. It is a proxy between your shape objects and their visual representation using different rendering facilities including HTML5 Canvas.

With GFX you will surely not require a central draw method clearing and redrawing everything each time you need to make a transformation to some of the shapes.

Upvotes: 1

Related Questions