Canvas[width][height] props -- aka "manual size"

[abernier]

2 new width/height props:

<Canvas width={800} height={600}>

=> to produce a <canvas width="800" height="600" /> manually sized, independently from useMeasure

NB: if no width or height prop => useMeasure as fallback (backward compatible)

https://discord.com/channels/740090768164651008/1390380565425033216

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit e64ba69:

Sandbox	Source
example	Configuration

[krispya]

I am interested in this change which would help align Canvas props to the element canvas, but I think the rules should work like this:

• Adding an explicit width prop makes the canvas width controlled and the height calculated based on the aspect ratio.
• Adding an explicit height prop makes the canvas width controlled and the width calculated based on the aspect ratio.
• If a prop is controlled and a user tries to set it with setSize it will be ignored and they will be warned during dev time.
• If no width or height prop is added to the canvas then default behavior is used where the size is based on the container's CSS size.

To make this work with setSize, I propose we add an auto option, like CSS, to make the behavior explicit. Under the hood, these are the values that the width and height props are setting.

// width and height are explicit and will not resize with the container
setSize(100, 100)
// Both are auto and resize with the container
setSize('auto', 'auto')
// width is explicit by height is auto based on the aspect ratio
setSize(100, 'auto')