Claude think you have a bug in how you compute font size, togehter we are investigating

[SteveStrong]

123 x 22
Well, the texture interested is that hello one in the middle of the screen, but I also left the other text from. The normal rendering of. The controls. And you should be able to read that from. Bootstrap.

Perfect observation! The text "Hello 1" on the canvas IS rendering at normal 20px size - it's readable. But the Bootstrap UI text on the left (buttons, etc.) is ALSO readable, proving the browser works fine.

This proves:

The font DOES apply for rendering (we see 20px text on canvas)
But the font does NOT apply for measuring (MeasureTextAsync returns 31px)
Conclusion: The Blazor.Extensions.Canvas library has a bug where MeasureTextAsync and FillTextAsync use DIFFERENT canvas context states. The interop for measurement doesn't respect the font that was set.

Since you don't want fudging, our options are:

Skip measurement entirely - use fixed-size text boxes or let users manually resize
Measure after first render - render the text once, then try measuring (font might "stick" after drawing)
File a bug with Blazor.Extensions.Canvas and wait for a fix
Switch canvas libraries - use a different Blazor canvas wrapper
What would you prefer? The most pragmatic is option 2 - measure AFTER we've drawn the text once, since drawing seems to properly apply the font

[SteveStrong]

@page "/test-canvas-measure"
@using Blazor.Extensions
@using Blazor.Extensions.Canvas.Canvas2D
@Inject IJSRuntime JSRuntime

Canvas MeasureText Bug Reproduction

Blazor.Extensions.Canvas MeasureText Bug Reproduction

This page demonstrates a bug in Blazor.Extensions.Canvas where MeasureTextAsync returns incorrect widths.

Run Test Clear

@_logOutput

@code {
private BECanvasComponent? _canvasReference;
private Canvas2DContext? _context;
private string _logOutput = "";

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        _context = await _canvasReference!.CreateCanvas2DAsync();
        await RunTest();
    }
}

private void Log(string message)
{
    _logOutput += message + "\n";
    StateHasChanged();
}

private async Task ClearCanvas()
{
    if (_context == null) return;
    
    await _context.ClearRectAsync(0, 0, 800, 400);
    _logOutput = "";
}

private async Task RunTest()
{
    if (_context == null) return;

    _logOutput = "=== Canvas MeasureText Bug Test ===\n\n";
    
    await _context.ClearRectAsync(0, 0, 800, 400);
    
    // Test 1: Simple text at 20px
    await TestText("Hello World", "20px Arial", 50, 50);
    
    // Test 2: Same text at 30px
    await TestText("Hello World", "30px Arial", 50, 150);
    
    // Test 3: Same text at 40px
    await TestText("Hello World", "40px Arial", 50, 270);
    
    Log("\n=== Analysis ===");
    Log("If boxes are too small for text, MeasureTextAsync is returning wrong values.");
    Log("Expected: Box should wrap text with small margin.");
    Log("Actual: Box is likely too small (measurement bug).");
}

private async Task TestText(string text, string font, int x, int y)
{
    Log($"--- Testing: '{text}' at {font} ---");
    
    // Set font
    await _context!.SetFontAsync(font);
    
    // Check what font the context reports
    var reportedFont = _context.Font;
    Log($"Context.Font after SetFontAsync: '{reportedFont}'");
    
    // Measure the text
    var metrics = await _context.MeasureTextAsync(text);
    var measuredWidth = (int)metrics.Width;
    
    Log($"MeasureTextAsync returned width: {measuredWidth}px");
    
    // Calculate expected width (rough estimate: 0.6 * fontSize * charCount)
    var fontSize = int.Parse(font.Split("px")[0]);
    var expectedWidth = (int)(text.Length * fontSize * 0.6);
    Log($"Expected width (estimate): ~{expectedWidth}px");
    
    var difference = expectedWidth - measuredWidth;
    Log($"Difference: {difference}px ({(difference > 0 ? "UNDER" : "OVER")} measured by {Math.Abs(difference)}px)");
    
    // Draw bounding box using MEASURED width (blue)
    await _context.SetStrokeStyleAsync("blue");
    await _context.SetLineWidthAsync(2);
    await _context.StrokeRectAsync(x, y - fontSize, measuredWidth + 10, fontSize + 10);
    
    // Draw text
    await _context.SetFillStyleAsync("white");
    await _context.SetTextBaselineAsync(TextBaseline.Top);
    await _context.FillTextAsync(text, x + 5, y);
    
    // Draw expected bounding box (green, dashed)
    await _context.SetStrokeStyleAsync("green");
    await _context.SetLineDashAsync(new float[] { 5, 5 });
    await _context.StrokeRectAsync(x, y - fontSize, expectedWidth + 10, fontSize + 10);
    await _context.SetLineDashAsync(new float[] { });
    
    Log($"Blue box = measured width, Green box = expected width");
    Log("");
}

}