SpectreCanvas

Display

Renders an array of pixels with different colors.

@using Spectre.Console
@using RazorConsole.Components

<SpectreCanvas Pixels="@Pixels" CanvasWidth="@Width" CanvasHeight="@Height" PixelWidth="2" />

@code {
    private const int Width = 16;
    private const int Height = 16;
    private (int x, int y, Color color)[] Pixels { get; set; } = [];

    protected override void OnInitialized()
    {
        var pixels = new List<(int, int, Color)>();
        
        for (int y = 0; y < Height; y++)
        {
            for (int x = 0; x < Width; x++)
            {
                // 8x8 board, 2x2 pixels per square
                int boardX = x / 2;
                int boardY = y / 2;
                
                bool isDark = (boardX + boardY) % 2 == 1;
                var color = isDark ? Color.Black : Color.White;
                
                pixels.Add((x, y, color));
            }
        }
        
        Pixels = pixels.ToArray();
    }
}

Parameters

6
NameTypeDefaultDescription
Appearance
CanvasHeightInt32—Height of the canvas in pixels.
CanvasWidthInt32—Width of the canvas in pixels.
MaxWidthNullable<Int32>—Maximum width of the rendered canvas in console characters. If null , no constraint is applied.
PixelWidthInt32—Width of each pixel when rendered. Default is 2 characters, creating more square-looking pixels.
Other
PixelsSystem.ValueTuple<System.Int32,System.Int32,Spectre.Console.Color>[]—Renders a pixel-based canvas for drawing graphics in the console using Spectre.Console's Canvas renderable.
ScaleBoolean—Whether the canvas should automatically scale to fit the console. Default is false .

API

<SpectreCanvas>