Question: Can you set canvas width and height to full document width and height?

[paularundel]

Hi,

Is there a way to set canvas to full document width and height? Also can you retrieve the current canvas width and height in the component OnAfterRender()?

Thanks for any help

[galvesribeiro]

Is there a way to set canvas to full document width and height?

You can set the width/height to whatever you want. Just set the properties on it.

Also can you retrieve the current canvas width and height in the component OnAfterRender()?

Today it doesn't support that as the ElementRef from Blazor doesn't allow you to invoke method/props on it.

[Blightbuster]

You can scale the canvas with css:

canvas {
    background-color: #ffffff;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
}

Its not perfect since you will have issues with unproportional scaling (a square on a 100x100 canvas may be displayed as a rectangle) as long as you dont know the aspect ratio of the canvas.

[Blightbuster]

Ok so i tampered a bit and found a solution.
Put this into your css:

canvas {
    background-color: #ffffff;
    display: block;
    position: fixed;
}

And into your index.html you put this:

<script>
    function ResizeCanvas() {
        var canvas = document.querySelector('canvas');
        canvas.style.width = '100%';
        canvas.style.height = '100%';
        canvas.width = canvas.offsetWidth;
        canvas.height = canvas.offsetHeight;
        return { width: canvas.width, height: canvas.height };
    }
</script>

then call ResizeCanvas() with JSInterop either in the razor or in a cs file.

If you want to get the resulting size of the canvas you can use the return value of ResizeCanvas().