An optimization for sprites is to render them to a canvas, then just keep a reference to that canvas and render from there each time, rather than repeating the colorization steps each draw frame.
For the Sprite class, this would mean providing a way to specify color per layer, as well as specifying render logic to run on each frame which would generate a HTMLCanvasElement that contains the complete, rendered, scaled image.
See https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas for more notes on optimizing canvas.
An optimization for sprites is to render them to a canvas, then just keep a reference to that canvas and render from there each time, rather than repeating the colorization steps each draw frame.
For the Sprite class, this would mean providing a way to specify color per layer, as well as specifying render logic to run on each frame which would generate a
HTMLCanvasElementthat contains the complete, rendered, scaled image.See https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas for more notes on optimizing canvas.