Sprites.Media.Sprite.Canvas

Sprites.Media.Sprite.Canvas.GridLineWidth Number

The thin grid line width, in world units. One unit is one pixel of the sprite. View draws the grid with the grid pair.

0.04

Sprites.Media.Sprite.Canvas.GridColour String

The grid line colour.

"rgba(0, 0, 0, 0.25)"

Sprites.Media.Sprite.Canvas.OutlineWidth Number

The sprite outline width, in world units. One unit is one pixel of the sprite. View draws the sprite outline with the outline pair.

0.18

Sprites.Media.Sprite.Canvas.OutlineColour String

The sprite outline colour.

"#020d02"

Sprites.Media.Sprite.Canvas.PixelColumn Sprites.Reactive.Value

Sprites.Media.Sprite.Canvas.PixelColumn(i, width, aspect)

The drawn left edge of pixel i: its column stretched by the aspect. A composite over Sprites.Maths: i wrapped by the width gives the column, then the aspect stretches it.

Returns a read-only Sprites.Reactive.Value, the drawn left edge.

const x = Sprites.Media.Sprite.Canvas.PixelColumn(5, 4, 2);
Sprites.Ui.Dom.Text('PixelColumn(5, 4, 2) = ', x);

Sprites.Media.Sprite.Canvas.PixelRow Sprites.Reactive.Value

Sprites.Media.Sprite.Canvas.PixelRow(i, width)

The row of pixel i: i over the width, rounded down. A composite over Sprites.Maths.

Returns a read-only Sprites.Reactive.Value, the pixel row.

const row = Sprites.Media.Sprite.Canvas.PixelRow(5, 4);
Sprites.Ui.Dom.Text('PixelRow(5, 4) = ', row);

Sprites.Media.Sprite.Canvas.PixelColour Sprites.Reactive.Value

Sprites.Media.Sprite.Canvas.PixelColour(cells, i, resolve)

The CSS colour of pixel i, or undefined when it is transparent. resolve is a reactive mapper from a cell to its CSS colour. A composite: read the cell, resolve it, and choose undefined for a transparent cell.

Returns a read-only Sprites.Reactive.Value, the CSS colour or undefined.

const cells = Sprites.Reactive.Value([Sprites.Media.Sprite.White, undefined]);
const first = Sprites.Media.Sprite.Canvas.PixelColour(cells, 0, Sprites.Colour.Css);
const second = Sprites.Media.Sprite.Canvas.PixelColour(cells, 1, Sprites.Colour.Css);
Sprites.Ui.Dom.Text('0 = ', first, ', 1 = ', second);

Sprites.Media.Sprite.Canvas.PixelVisible Sprites.Reactive.Value

Sprites.Media.Sprite.Canvas.PixelVisible(colour)

True when a pixel has a colour to draw: its resolved colour is not the transparent undefined. A composite over Sprites.Logic.

Returns a read-only Sprites.Reactive.Value, true when the pixel draws.

const shown = Sprites.Media.Sprite.Canvas.PixelVisible('#f44');
const hidden = Sprites.Media.Sprite.Canvas.PixelVisible(undefined);
Sprites.Ui.Dom.Text('colour = ', shown, ', transparent = ', hidden);

Sprites.Media.Sprite.Canvas.Pixels Void

Sprites.Media.Sprite.Canvas.Pixels(cells, width, aspect, resolve)

One filled square per opaque cell, in its colour, drawn inside a Vector. resolve turns a cell integer into a CSS colour. aspect stretches each pixel on the x axis.

Returns nothing.

const red = 0xff4444ff;
const blue = 0x4444ffff;
const blank = Sprites.Media.Sprite.New(4, 4);
const painted = Sprites.Grid.Two.Set(blank, 1, 1, red);
const grid = Sprites.Grid.Two.Set(painted, 2, 2, blue);
const cells = Sprites.Object.Field(grid, 'cells');
const width = Sprites.Reactive.Value(4);
const pan = Sprites.Reactive.Value({ x: 2, y: 2 });
const show = Sprites.Reactive.Value(6);
Sprites.Ui.Dom.Tag('div', () => {
  Sprites.Ui.Dom.Style('height', '160px');
  Sprites.Ui.Image.Vector(pan, show, () => {
    Sprites.Media.Sprite.Canvas.Pixels(cells, width, 1);
  });
});

Sprites.Media.Sprite.Canvas.View Void

Sprites.Media.Sprite.Canvas.View(cells, width, height, pan, show, aspect, resolve, overlay)

The sprite view: a Vector filling its container. It draws the pixels, the thin grid, then a thicker dark outline around the whole sprite. overlay is an optional build run last, for tool feedback in sprite space, like the brush cursor from Sprites.Media.Sprite.Draw.

Returns nothing.

const blank = Sprites.Media.Sprite.New(8, 8);
const grid = Sprites.Grid.Two.Set(blank, 3, 4, Sprites.Media.Sprite.White);
const cells = Sprites.Object.Field(grid, 'cells');
const width = Sprites.Reactive.Value(8);
const pan = Sprites.Reactive.Value({ x: 4, y: 4 });
const show = Sprites.Reactive.Value(11);
Sprites.Ui.Dom.Tag('div', () => {
  Sprites.Ui.Dom.Style('height', '180px');
  Sprites.Media.Sprite.Canvas.View(cells, width, width, pan, show, 1);
});