I have made a program in Javascript and HTML5 canvas and I am wondering what hap

Question

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.

Explanation / Answer

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.

Related Questions

Navigate

• Browse (All)
• Browse I
• Subjects