ex.Canvas forces dimensions to next size power of 2

[eonarheim]

Steps to Reproduce

Setting the dimension of a ex.Canvas to 200x200 forces it to 256x256, this is unexpected to users. If we need power of two images it should be handled internally not leaked to the user.

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);
    }
})

Expected Result

ex.Canvas dimension should have been 200x200

Actual Result

ex.Canvas was unexpectedly 256x256

Environment

• browsers and versions: NA
• operating system: NA
• Excalibur versions: v0.26.0

Current Workaround

Compensate by setting the ex.Canvas to a power of two, then offset to center.

[eonarheim]

With the switch to webgl2 I think we can drop the power of two manipulation as well 🎉

https://webgl2fundamentals.org/webgl/lessons/webgl2-whats-new.html