"I'm currently stuck on "can I count on the HTML Canvas to optimise cases where a tile is out of view or should I make a fancy system to calculate that now?""
I am not sure if I understand you correctly, but since I did wrote a canvas game from scratch, I can tell you that you cannot count on the canvas to optimize anything (and likely not what you want in this case)
Every browser does it a bit different and it will depend on the hardware and OS what optimisation features are avaiable.
On average the canvas is quite performant, though.
Performant enough, that in my case, I draw everything on a big map - zoom in and then move the map around, when the player moves.
On a gaming PC, maps can be quite large - but on an average mobile not so much.
But I autogenerate the levels which means I can dynamically adjust size, so this works for my game.
But in general yes, you want a small canvas, the size of the screen - and then only draw what is needed.
EaselJS may help with that.
It is basically flash on the canvas, but does exactly this. You put all your graphic objects on the stage - and easelJS will figure out which one of those needs to be drawn at the current frame.
I initially used it, but not anymore as it was not optimized for my use case, making LOTS of new draw calls on the map every tick. But for a classic game with limited entities, it is very performant.
I also found Canvas a bit challenging - not the programming model per day but just the work of coordinating scenes and objects. I got overwhelmed with the number of frameworks at the time and didn't want to go down the path of investing in a single one (not a good move in hindsight).
By the way I wonder if it is reasonable to expand the "requirement" to - wasming is ok if you are writing the game from scratch in say rust instead of just compiling old binaries to wasm?
> I am not sure if I understand you correctly, but since I did wrote a canvas game from scratch, I can tell you that you cannot count on the canvas to optimize anything (and likely not what you want in this case)
Bad wording on my part. I noticed somewhat of a performance difference when drawing an image at coordinates that are outside of the canvas boundaries and was wondering if the scale of this is significant.
Do you have the source of your game published anywhere?
"I noticed somewhat of a performance difference when drawing an image at coordinates that are outside of the canvas boundaries and was wondering if the scale of this is significant."
You mean you have a canvas of 1000 px size and make a drawImage at x> 1000?
Well in that case the image does not get drawn at all, so most browsers should indeed be more performant by ignoring this call. But there might still be a overhead of loading the image, so I would check the boundaries and not make that call, if it is not necessary.
(The canvas itself is just a large array of numbers after all. And if you do not manipulate that array when your new values are outside of that boundary, nothing happens. And a image is usually just a pointer to another large array/blob, so if the browser is smart, it does not load that array, when it finds out it does not have to)
"Do you have the source of your game published anywhere?"
Unfortunately not yet, but soon I will release. I hope.
I am not sure if I understand you correctly, but since I did wrote a canvas game from scratch, I can tell you that you cannot count on the canvas to optimize anything (and likely not what you want in this case)
Every browser does it a bit different and it will depend on the hardware and OS what optimisation features are avaiable.
On average the canvas is quite performant, though.
Performant enough, that in my case, I draw everything on a big map - zoom in and then move the map around, when the player moves.
On a gaming PC, maps can be quite large - but on an average mobile not so much.
But I autogenerate the levels which means I can dynamically adjust size, so this works for my game.
But in general yes, you want a small canvas, the size of the screen - and then only draw what is needed.
EaselJS may help with that. It is basically flash on the canvas, but does exactly this. You put all your graphic objects on the stage - and easelJS will figure out which one of those needs to be drawn at the current frame. I initially used it, but not anymore as it was not optimized for my use case, making LOTS of new draw calls on the map every tick. But for a classic game with limited entities, it is very performant.