Width and height values non-functional on "this" bindings tutorial

Describe the bug

On the tutorial section that explains how to use bind:this, there is a bug in that the reactive width and height values set for the canvas are overridden by the canvas CSS section.

I found this confusing as I felt something was supposed to be demonstrated by binding these values reactively.

Reproduction

See the style section of the App.svelte file is as such:


<style>
    canvas {
        width: 100%;
        height: 100%;
        background-color: #666;
        -webkit-mask: url(/svelte-logo-mask.svg) 50% 50% no-repeat;
        mask: url(/svelte-logo-mask.svg) 50% 50% no-repeat;
    }
</style>

Remove the width and height parameters as such:

<style>
    canvas {
        background-color: #666;
        -webkit-mask: url(/svelte-logo-mask.svg) 50% 50% no-repeat;
        mask: url(/svelte-logo-mask.svg) 50% 50% no-repeat;
    }
</style>

See that the canvas element now appropriately sizes to a width and height of 32 as described here (which is clearly too small):

<canvas
    bind:this={canvas}
    width={32}
    height={32}
></canvas>

Logs

No response

System Info

N/A

Severity

annoyance

sveltejs / svelte