I have made a program in Javascript and HTML5 canvas and I am wondering what happens when you draw a shape on a certain location of canvas then draw another shape on top of that same object. Does it consume more memory because I am drawing new object on top of each others? (Currently, rendering process of my program is not that fast, I am assuming it is due to I am drawing new object on top of old object, is that right?). Also, I want to know what kind of performance monitoring tools available out there for Javascript programs. I want to figure out which fragment of my program consumes the most memory so I can optimise that particular process to be faster. Thank you.
Does it consume more memory because I am drawing new object on top of each others?
Very unlikely. A canvas is technically just a two-dimensional array of pixels. When you draw a blue rectangle to the canvas, you just change the color values of the pixels which were there before. The old color values of the affected pixels are lost. The information that these now-blue pixels belong to a rectangle object isn’t save either. They are just color values with no special relation to each other.
Use for example Google Chrome developer tools, see:
https://stackoverflow.com/questions/855126/what-is-the-best-way-to-profile-javascript-execution
It seems this has not been discussed a lot on programmers.SE but on stack exchange you can find a lot practical tools and methods to perform this task.
Generally Google Chrome is a good tool for it but off-course it is not cross browser. So, if performance in other browsers should be as good take a look on the specific tools for those browsers (look for profiler / performance profiler / etc).
There are also JS based tools (not sure how accurate they are since they measure from within the javascript engine):
http://code.google.com/p/jslitmus/