Narrating Prophetic Monks
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.10 • Public • Published


    npm version npm downloads Twitter Follow

    This project is part of the monorepo.


    2D shape drawing & rasterization.

    The functions in this package can be used with any IGrid2D compatible grid/image type (e.g. those provided by or

    Currently the following functions are available. All of them support custom shader-like functions to produce "pixel" values.



    Polygon / polyline

    Filled or outline drawing of polygons (without holes):


    • drawRect(): Filled or outline implementation with pre-applied clipping against the target grid.

    Flood fill

    • floodFill(): Fills grid in the connected region around x,y with given value or shader

    Also see corresponding function in

    Custom shaders

    Conceptually similar, but not to be equaled with actual WebGL fragement shaders, many functions in this package support shader-like functions to produce per-pixel fill/color values for each individual pixel processed. These simple functions take an x and y arg (in grid-space, not normalized!) and produce a fill value for that location. A pixel is processed at most once per draw call.

    The following shader functions are provided:

    As an example, here's a simple custom UV gradient shader for drawing into a float RGBA buffer:

    import type { Shader2D } from "";
    import { floatBuffer } from "";
    import { drawCircle } from "";
    // custom gradient shader
    const defUVGradient = (width: number, height: number): Shader2D<number[]> =>
      (x, y) => [x/width, y/height, 0.5, 1];
    const W = 256;
    // create float RGBA pixel buffer
    const img = floatBuffer(W, W);
    // draw filled circle using gradient shader
    drawCircle(img, W/2, W/2, W/2 - 4, defUVGradient(W, W), true);

    result image: circle with gradient fill


    ALPHA - bleeding edge / work-in-progress

    Search or submit any issues for this package

    Related packages

    • - 2D grid and shape iterators w/ multiple orderings
    • - Typedarray integer & float pixel buffers w/ customizable formats, blitting, drawing, convolution
    • - Text based canvas, drawing, tables with arbitrary formatting (incl. ANSI/HTML)


    yarn add

    ES module import:

    <script type="module" src=""></script>

    Skypack documentation

    For Node.js REPL:

    # with flag only for < v16
    node --experimental-repl-await
    > const rasterize = await import("");

    Package sizes (brotli'd, pre-treeshake): ESM: 1.47 KB


    Usage examples

    Several demos in this repo's /examples directory are using this package.

    A selection:

    Screenshot Description Live demo Source
    Steering behavior drawing with alpha-blended shapes Demo Source


    Generated API docs



    Karsten Schmidt

    If this project contributes to an academic publication, please cite it as:

      title = "",
      author = "Karsten Schmidt",
      note = "",
      year = 2021


    © 2021 - 2022 Karsten Schmidt // Apache Software License 2.0


    npm i

    DownloadsWeekly Downloads






    Unpacked Size

    40.6 kB

    Total Files


    Last publish