In general, I'm wondering what is driving this need to optimize. Are you sure the problems you're trying to solve are the problems causing your performance issues, assuming you are even observing performance issues? Have you used Chrome's performance profiling features to check where performance is an issue?
What is "~~"?
ctx.drawimage is
most definitely the problem. Something about it seems to be causing the game to lag. This is most noticeable when you draw tons of tiles.
SGDK2 is telling me that drawing large images is faster than drawing multiple smaller images.
That doesn't make any sense to me because every JSPerf out there says drawing subimges of an image is slightly faster than drawing one huge image!
So I glanced at the Frame.draw function and slapped myself for not seeing the solution sooner!
I've discovered SGDK2's issue here, subpixels.
1. We need to disable image smoothing in the context.
2. All coordinates/parameters that are passed to drawimage should be wrapped with ~~.
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvasThis article states it directly as the second bulletpoint
~~ is my favorite operator that is similar to Math.floor() for "int" conversions. It's what I use to fix the coordinates and attempt to alleviate the lag. I've noticed less lag and slowdown when drawing high-density tile regions and ive managed to speed up X/Frame.draw.
Because of the subpixels (When sprites or layer.currentX/Y is in a non-integer location, drawImage has to perform extra unnecessary calculations.. which I suppose is causing the slowdown.
Try ~~ for yourself with a game that has tons of tiles/sprites with floating point positions on mobile.
https://jsperf.com/drawimage-whole-pixels/45 proof
https://jsperf.com/drawimage-whole-pixels/42Next
One of my issues with dynamically loading Graphics is the way that SGDK2 handles modulate colors.
I know the difference between image url's and the base64 embeds. That isn't enough for me and I'm sorry for not being more clear, it isn't the issue. I currently use very large graphics 1024x768 and use color modulation for maaaaaaaaaaany frames of these large graphics... such as large high resolution color changing backgrounds and have many within my game, which make many calls to the ModulateCelColor function in Frame.js.. The repeated use of getImageData/putImageData creates garbage (at a glance, similar to memory leak, but it actually gets recycled at a certain plateau, 200MB on pc) so this is a known issue in Chromium.
https://bugs.chromium.org/p/chromium/issues/detail?id=242215Imagine this now with a new Typed array of 1024x768 bytes for each frame.
You'll get nice little error in Firefox eventually which happens for me, which makes your project unable to load.
Look in Frame.js and see where and why.
document.write('Failed to process images. This may occur when running from local files; see <a href="
http://stackoverflow.com/questions/2704929/uncaught-error-security-err-dom-exception-18">see details</a>');
The try/catch tells us this. Okay!
Except, that isn't the error, is it?

Nope. What?
There's a memory limit and I've quickly hit it in Firefox, even with base64 embeds.. so I know it can't be that security issue.
So I've just removed color modulation from my project altogether by removing that function, and no more issues on mobile... and no more weird "security issue" in Firefox which isn't really a security issue at all but a memory issue!
Too bad for that actually.

It would be really nice to be able to control when and where these things happened.
Next
Another bulletpoint from the optimize canvas article is that transparent canvases are inherently slower to draw to.
Your points are correct.. my understanding of PNG/JPEG transparency would tell me that JPEG would be faster to draw, lacking the transparency of PNG and not needing sophisticated color blending, and since opaque canvases are faster.
So I created a performance test on jsperf to investigate
https://jsperf.com/png-vs-jpg-drawimage/1
In this test case, I was incorrect, surprising me. It turns out that PNG was faster.
Perplexed, I ran another test, this time, trying to take advantage of the fact that PNG has transparency and this matters more when overlapping images, so I made multiple in-place runs of drawImage.

JPEG was faster in the second test.. But not by much. They seem very close with performance differences mainly due to error.
I wanted to stress test it even further.. so I did this in a loop of 150 images... ( a real environment)

JPEG was once again faster.. but not by much!
----------------
I've sped up my performance on phone a tad mainly with double tildes. If you'd like, look into it the ModulateCelColor issue I mentioned also. PNG/JPEG isn't an issue.
Great engine btw!
To tell you the truth, I've been using this engine since it was released a decade ago but without ever registering here...
The HTML5 stuff isn't difficult but it isn't as good to me as the C# code (OpenTK, or even the prior DirectX code)
I'm sorry for disturbing you so much, We're really pushing it to its limit with all of the modifications/ custom JS code I'm adding (Our game really strains SGDK2 because we're trying to make SGDK2 into a 2.5D Sega Saturn on steroids with HTML5). So any optimization is good to me right now..
I've modified the code so much the only thing I use SGDK2 for is just project management of assets. Nearly all of the code I'm using now is very different from SGDK2.. The original code was useful for prototyping our project.
Despite using entirely different .js files, the SGDK2 project still loads and exports. I like the open source-ness of this engine!