#qjs-nanovg API Documentation

JavaScript bindings for NanoVG exposed as the QuickJS native module nanovg. This document is generated from the actual exports in nvgjs-module.c — it is the authoritative reference for names and signatures.

import {
  CreateGL3, DeleteGL3, RGB, RGBA, ANTIALIAS, STENCIL_STROKES, Transform,
} from 'nanovg';

Run scripts with qjsm (the module-enabled QuickJS), which loads the installed nanovg.so. A current OpenGL context must already exist (typically created via the separate glfw module) before calling CreateGL3.

Conventions

• All method and function names are PascalCase.
• Angles are in radians (use DegToRad/RadToDeg to convert).
• Image and font handles are plain integer ids.
• A color argument accepts a Color object or a plain array [r, g, b] / [r, g, b, a] of 0..1 floats (this is the raw NVGcolor layout, regardless of how the color was constructed).

#Module exports

#Named class/object exports

#Free functions

These are exported directly from the module.

#Context lifecycle (OpenGL 3 backend — this build)

(CreateGL2, DeleteGL2, CreateImageFromHandleGL2, ImageHandleGL2 exist only when the module is compiled with NANOVG_GL2; this build uses GL3.)

#Framebuffers

The framebuffer object returned by CreateFramebuffer has four read-only integer properties:

Its Symbol.toStringTag is NVGLUframebuffer. Call DeleteFramebuffer(fb) yourself before the window closes: the garbage collector does not free it, because the GL context may already be gone.

#Pixel read-back

#Angle helpers

#Color constructors

All return a Color object.

#Standalone transform

#Constants

Exported as module properties (integers unless noted).

• Create flags: ANTIALIAS, STENCIL_STROKES, DEBUG
• Math: PI (number)
• Winding / solidity: CCW, CW, SOLID, HOLE
• Line cap: BUTT, ROUND, SQUARE
• Line join: MITER, ROUND, BEVEL
• Text align: ALIGN_LEFT, ALIGN_CENTER, ALIGN_RIGHT, ALIGN_TOP, ALIGN_MIDDLE, ALIGN_BOTTOM, ALIGN_BASELINE
• Image flags: IMAGE_GENERATE_MIPMAPS, IMAGE_REPEATX, IMAGE_REPEATY, IMAGE_FLIPY, IMAGE_PREMULTIPLIED, IMAGE_NEAREST, IMAGE_NODELETE
• Texture type: TEXTURE_ALPHA, TEXTURE_RGBA
• Blend factors (exported, but no function accepts them yet, see Not yet bound): ZERO, ONE, SRC_COLOR, ONE_MINUS_SRC_COLOR, DST_COLOR, ONE_MINUS_DST_COLOR, SRC_ALPHA, ONE_MINUS_SRC_ALPHA, DST_ALPHA, ONE_MINUS_DST_ALPHA, SRC_ALPHA_SATURATE
• Composite operations (same: GlobalCompositeOperation is not bound): SOURCE_OVER, SOURCE_IN, SOURCE_OUT, ATOP, DESTINATION_OVER, DESTINATION_IN, DESTINATION_OUT, DESTINATION_ATOP, LIGHTER, COPY, XOR

#Context methods

All methods are invoked on a context returned by CreateGL3().

#Frame

#State

#Path building

#Fill & stroke style

#Gradients & paints

Each returns a Paint object for use with FillPaint/StrokePaint.

#Scissor (clipping)

#Transforms

Angles in radians. The matrix order is [a, b, c, d, e, f].

#Images

#Fonts & text

#Transform helpers

Transform values are Float32Array(6) matrices. They have indexed accessors a,b,c,d,e,f and aliases xx,yx,xy,yy,x0,y0.

#Static functions (on the Transform export)

These build/modify matrices. When called without a target matrix they return a new Transform; when the first argument is a matrix they operate on it in place. They are chainable (return the matrix), e.g. Transform.Scale(3, 3).Rotate(angle).Translate(1, 1).

#Instance methods (on a transform value)

A transform value also carries chainable instance methods Translate, Scale, Rotate, SkewX, SkewY, Multiply, Premultiply, Inverse, and TransformPoint(x, y) (which returns the transformed point as [x, y]). They modify the transform in place and return it, so they chain. m.Inverse() inverts m in place and ignores any argument.

#Errors

Errors are ordinary JavaScript exceptions:

Create the OpenGL context (for example with glfw) and make it current before calling CreateGL3.

#Not yet bound

These NanoVG functions have no binding yet (14 of the 104 in nanovg.h):

• Fonts: nvgCreateFontMem, nvgCreateFontMemAtIndex (fonts from memory), nvgFontFaceId, nvgAddFallbackFont, nvgAddFallbackFontId, nvgResetFallbackFonts, nvgResetFallbackFontsId (fallback fonts).
• Text measurement: nvgTextMetrics, nvgTextGlyphPositions, nvgTextBreakLines.
• Compositing: nvgGlobalCompositeOperation, nvgGlobalCompositeBlendFunc, nvgGlobalCompositeBlendFuncSeparate. The SOURCE_OVER... and blend factor constants are exported, but there is nothing to pass them to.
• Debugging: nvgDebugDumpPathCache.

#Using paints

A Paint is what the gradient and pattern methods return. Pass it to FillPaint or StrokePaint inside a path, as examples/planets.js does with an image:

const id = nvg.CreateImage('picture.png', 0);
const [w, h] = nvg.ImageSize(id);
const pattern = nvg.ImagePattern(0, 0, w, h, 0, id, 1);

nvg.BeginPath();
nvg.Rect(0, 0, w, h);
nvg.FillPaint(pattern);
nvg.Fill();

The gradient methods work the same way and take colours built with RGB/RGBA:

const paint = nvg.LinearGradient(0, 0, 0, 100, RGBA(255, 192, 0, 255), RGBA(255, 0, 0, 255));

#Reading pixels back

ReadPixels(w, h) returns an ArrayBuffer of w * h * 4 RGBA bytes from the current OpenGL framebuffer. Call it after drawing and before swapBuffers().

#Minimal example

import * as glfw from 'glfw';
import { CreateGL3, STENCIL_STROKES, ANTIALIAS, RGB, RGBA } from 'nanovg';

glfw.Window.hint(glfw.CONTEXT_VERSION_MAJOR, 3);
glfw.Window.hint(glfw.CONTEXT_VERSION_MINOR, 2);
glfw.Window.hint(glfw.OPENGL_PROFILE, glfw.OPENGL_CORE_PROFILE);
glfw.Window.hint(glfw.OPENGL_FORWARD_COMPAT, true);

const win = (glfw.context.current = new glfw.Window(1024, 768, 'NanoVG'));
const { width, height } = win.size;

const nvg = CreateGL3(STENCIL_STROKES | ANTIALIAS);

while (!win.shouldClose) {
  nvg.BeginFrame(width, height, 1);

  nvg.BeginPath();
  nvg.Rect(100, 100, 200, 150);
  nvg.FillColor(RGBA(255, 128, 0, 255));
  nvg.Fill();
  nvg.StrokeColor(RGB(255, 255, 255));
  nvg.StrokeWidth(3);
  nvg.Stroke();

  nvg.EndFrame();
  win.swapBuffers();
  glfw.poll();
}

DeleteGL3(nvg);

See examples/planets.js for a fuller, animated example.