why is Canvas moved to left top - thus not centered?

[divinitas-art]

I am creating my own graphics using Canvas graphical component and the final image is not centered as any other graphics i use is.
Is this some sort of a bug or does this have a reason?

It might be a bug, since it does it in example on this page too
https://excaliburjs.com/docs/canvas

according to the code shown, the red box should be in center of scene? and it isnt...

[eonarheim]

Hi @divinitas-art this is a great question!

The reason the red rectangle isn't centered in the example is the underlying HTML canvas under the ex.Canvas graphic has a default size and that canvas is centered. You can see the graphics bounds in yellow if I toggle debug mode on that snippet. (This isn't made very clear in the docs so I'll update that as well)

However there does seem to be a bug in the current ex.Canvas which forces the dimensions to be the next greatest power of 2 size. We should be able to fix ex.Canvas to allow arbitrary width/height before we release the next version of excalibur this week 👍

Here is a workaround to center the ex.Canvas in that snippet:

const canvas = new ex.Canvas({
    width: 256,
    height: 256,
    cache: true,  // If true draw once until flagged dirty again, otherwise draw to Canvas every frame
    draw: (ctx) => {
        console.log('With cache=true I draw once');
        ctx.fillStyle = 'red';
        ctx.fillRect(56/2, 56/2, 200, 200);
    }
})

[divinitas-art]

oh... now it all makes sense! yes, my canvas really is sized 1024 instead of 800, i was able to compesate for it, but i really wasnt sure why it is.

Great, thank you very much for your answer

[eonarheim]

I've created a bug #2403, theoretically won't be too difficult to fix

[eonarheim]

@divinitas-art The fix to this has been released as part of v0.27.0!