Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Nightre/Rapid.js/llms.txt

Use this file to discover all available pages before exploring further.

Rapid.js is published to npm under the package name rapid-render. It ships as a native ES module with a companion UMD bundle for environments that require CommonJS. TypeScript declarations are included in the package — no @types package is needed.
Rapid.js is under active development. You may encounter bugs or incomplete features. Contributions and issue reports are welcome on the GitHub repository.

​
Install the Package

npm install rapid-render

​
Import in Your Project

Import the classes and enums you need directly from rapid-render. The package is fully tree-shakeable, so unused exports are removed by your bundler at build time.
TypeScript
import { Rapid, Color, BlendMode, TextureFilterMode } from "rapid-render";
JavaScript (ESM)
import { Rapid, Color, BlendMode, TextureFilterMode } from "rapid-render";
The full set of named exports includes Rapid, Color, BlendMode, MaskType, TextureFilterMode, CanvasScaleMode, RenderTexture, Texture, TextureManager, MatrixStack, Vec2, CustomGlShader, and more. See the API reference for the complete list.

​
CDN / UMD Usage

If you are not using a bundler, the dist folder exposes two ready-to-use builds:
FileFormatUse case
dist/rapid.jsES moduleModern bundlers, <script type="module">
dist/rapid.umd.cjsUMD / CommonJSLegacy bundlers, Node.js require()
CDN via script module
<script type="module">
  import { Rapid, Color, TextureFilterMode } from "./dist/rapid.js";
  // your code here
</script>

​
Set Up the Canvas

Rapid.js renders into a standard HTML <canvas> element. Add one to your HTML file and give it an id so you can reference it from JavaScript.
HTML
<canvas id="canvas" width="800" height="600"></canvas>
The width and height attributes set the canvas’s initial pixel dimensions. Rapid.js will resize the backing framebuffer based on the IAppOptions you pass to the constructor, so these attributes primarily serve as fallbacks.

​
Create the Rapid Instance

Pass an IAppOptions object to the Rapid constructor to configure the renderer. The only required field is canvas; all others have sensible defaults.
TypeScript
const canvas = document.getElementById("canvas") as HTMLCanvasElement;

const rapid = new Rapid({
  canvas,
  logicWidth: 800,
  logicHeight: 600,
  backgroundColor: Color.fromHex("#1a1a2e"),
  antialias: false,
  textureFilter: TextureFilterMode.NEAREST,
});

​
IAppOptions Reference

OptionTypeDefaultDescription
canvasHTMLCanvasElement(required)The canvas element to render into.
logicWidthnumbercanvas CSS widthLogical viewport width in CSS pixels. All draw-call coordinates use this space.
logicHeightnumbercanvas CSS heightLogical viewport height in CSS pixels.
physicsWidthnumbercanvas CSS width × dprActual GPU framebuffer width in device pixels.
physicsHeightnumbercanvas CSS height × dprActual GPU framebuffer height in device pixels.
backgroundColorColorColor.BlackDefault clear color applied by rapid.clear().
antialiasbooleanfalseWhether to enable MSAA antialiasing on the WebGL canvas.
textureFilterTextureFilterModeNEARESTDefault texture sampling mode: LINEAR (smooth) or NEAREST (pixel-art).
premultipliedAlphabooleantrueWhether textures are uploaded with premultiplied alpha.
roundPixelsbooleanfalseSnap sprite positions to integer pixels to avoid sub-pixel blurring.
scaleModeCanvasScaleModeCanvasItemHow the canvas scales: CanvasItem (rasterize at display resolution) or Viewport (stretch the logical-size bitmap).

​
Logical vs. Physical Dimensions

logicWidth / logicHeight define the coordinate space your game uses. Every draw call uses these units. physicsWidth / physicsHeight are the actual GPU pixel dimensions of the WebGL framebuffer — on HiDPI / Retina displays these are typically canvas CSS width × devicePixelRatio.
  • Use logicWidth / logicHeight when you want your game to work in consistent CSS-pixel coordinates on all screens.
  • Use physicsWidth / physicsHeight when you need to control the exact GPU resolution, for example to lock a pixel-art game to its native resolution regardless of the display DPR.

Build docs developers (and LLMs) love

Get started for freeTalk to us