SkiaSharp.Views.Blazor and the SkiaSharp.Views not work well with Blazor/Wasm

[ShingYehGit]

Description

Blazor .Net 8 / SkiaSharp 2.88

(1).
in app.css

FitBody {
width: 100%;
height: calc(100vh - 5rem);
background-color: #239B56;
border-radius: 6px;
}

in Home.razor

<div class=“FitBody”>
</div>

work well, the div size (width: 100%; height: calc(100vh - 5rem);)as expected

(2).
once

<div class=“FitBody”>
<SKCanvasView @ref=“skiaView” OnPaintSurface=“OnPaintSurface” IgnorePixelScaling=“true” />
</div>

(3).

void OnPaintSurface(SKPaintSurfaceEventArgs args)
{
    SKImageInfo NewInfo = args.Info;
    SKSurface surface = args.Surface;
    SKCanvas canvas = surface.Canvas;
 
    canvas.Clear(SKColors.White);

    DisplayingSize = NewInfo.Size;
}

(4).
It should be whole white cover the <div class=“FitBody”>
The SKCanvas canvas size is wrong
Only cover the Left Top part
The SKCanvas canvas size should be equal to the
div size (width: 100%; height: calc(100vh - 5rem);)as expected

Code

The best way to share code for larger projects is a link to a GitHub repository: https://github.com/user/repo/tree/bug-123

But, you can also share a short block of code here:

FitBody {
width: 100%;
height: calc(100vh - 5rem);
background-color: #239B56;
border-radius: 6px;/* margin: 0 0 0 -20px; */
}

// some C# code here
void OnPaintSurface(SKPaintSurfaceEventArgs args)
{
    SKImageInfo NewInfo = args.Info;
    SKSurface surface = args.Surface;
    SKCanvas canvas = surface.Canvas;

    //canvas.Clear();
    canvas.Clear(SKColors.White);

    DisplayingSize = NewInfo.Size;
}

You can also share some XAML:

<!-- xaml code here -->
i
<div class=“FitBody”>
<SKCanvasView @ref=“skiaView” OnPaintSurface=“OnPaintSurface” IgnorePixelScaling=“true” />
</div>

Expected Behavior

The SKCanvas canvas size should be equal to the
div size (width: 100%; height: calc(100vh - 5rem);)as expected

Actual Behavior

The SKCanvas canvas size is wrong

Only cover the Left Top part

Version of SkiaSharp

2.88.3 (Current)

Last Known Good Version of SkiaSharp

2.88.2 (Previous)

IDE / Editor

Visual Studio (Windows)

Platform / Operating System

Windows

Platform / Operating System Version

Blazor/Wasm .Net 8 / SkiaSharp.Views.Blazor and the SkiaSharp.Views 2.88

Devices

Dell LapTop Win 11

Relevant Screenshots

Dell Laptop Window 11

Relevant Log Output

There is no log out

Code of Conduct

• I agree to follow this project's Code of Conduct

[whateverharder]

https://github.com/mono/SkiaSharp/tree/main/samples/Basic/BlazorWebAssembly
blazor demo also can not run.

[ShingYehGit]

Whatever tough SOS!
Check
https://github.com/ShingYehGit/WasmSkiaApp/tree/master/WasmSkiaApp

[whateverharder]

Whatever tough SOS! Check https://github.com/ShingYehGit/WasmSkiaApp/tree/master/WasmSkiaApp

404

[mattleibow]

Your css is affecting the FitBody div, not the canvas. The default size of a <canvas> element is (it appears) 300x150. In order to get scaling to be correct, you should set the canvas to fill the div:

canvas {
    width: 100%;
    height: 100%;
}

[ShingYehGit]

Many Thanks
canvas {
width: 100%;
height: 100%;
}
Makes it works