← Back to Documentation Index

🎨 2D Drawing API

Core 2D drawing functions for pixels, lines, rectangles, circles, and text rendering

📋 Overview

The 2D Drawing API provides fundamental drawing primitives for creating retro-style graphics. It includes pixel-perfect drawing, geometric shapes, a camera system, and a sophisticated 64-bit color system (RGBA64) for high-precision color values.

💡 Key Features
  • Pixel-perfect rendering - Direct pixel manipulation for retro aesthetics
  • Camera system - Easy scrolling and viewport management
  • RGBA64 color - 16-bit per channel for precise color control
  • Shape primitives - Lines, rectangles, circles with fill/outline options
  • Text rendering - Bitmap font system with scaling

🎨 Color System

Nova64 uses a 64-bit color system (RGBA64) with 16 bits per channel for precise color representation. Use the helper functions to work with colors easily.

rgba8(r, g, b, a = 255)

Creates a 64-bit color from 8-bit RGB values (0-255).

r number (0-255) - Red component
g number (0-255) - Green component
b number (0-255) - Blue component
a number (0-255) - Alpha (opacity), default: 255 (opaque)
Returns: BigInt - 64-bit color value
Example:
const red = rgba8(255, 0, 0, 255);
const transparentBlue = rgba8(0, 0, 255, 128);
const white = rgba8(255, 255, 255);
packRGBA64(r16, g16, b16, a16)

Creates a 64-bit color from 16-bit RGB values (0-65535). Advanced use only.

r16 number (0-65535) - Red component
g16 number (0-65535) - Green component
b16 number (0-65535) - Blue component
a16 number (0-65535) - Alpha component
Returns: BigInt - 64-bit color value

📷 Camera System

The camera system allows you to scroll the viewport by offsetting all drawing coordinates automatically.

setCamera(x, y)

Sets the camera offset for all subsequent drawing operations.

x number - Camera X offset
y number - Camera Y offset
Example: Scrolling camera following a player
// Follow player with centered camera
function update() {
  const camX = player.x - 320; // Center horizontally (640/2)
  const camY = player.y - 180; // Center vertically (360/2)
  setCamera(camX, camY);
}
getCamera()

Gets the current camera offset.

Returns: Object - {x: number, y: number}

🖌️ Drawing Functions

cls(color)

Clears the screen with the specified color.

color BigInt - Color to fill (use rgba8())
Example:
function draw() {
  cls(rgba8(0, 0, 20)); // Dark blue background
}
pset(x, y, color)

Draws a single pixel at the specified coordinates.

x number - X coordinate
y number - Y coordinate
color BigInt - Pixel color
Example: Draw random stars
for (let i = 0; i < 100; i++) {
  const x = Math.random() * 640;
  const y = Math.random() * 360;
  pset(x, y, rgba8(255, 255, 255));
}
line(x0, y0, x1, y1, color)

Draws a line between two points using Bresenham's algorithm.

x0, y0 number - Start point coordinates
x1, y1 number - End point coordinates
color BigInt - Line color
Example: Draw a crosshair
const centerX = 320, centerY = 180;
const white = rgba8(255, 255, 255);

line(centerX - 10, centerY, centerX + 10, centerY, white);
line(centerX, centerY - 10, centerX, centerY + 10, white);
rect(x, y, w, h, color, fill = false)

Draws a rectangle (outline or filled).

x, y number - Top-left corner position
w, h number - Width and height
color BigInt - Rectangle color
fill boolean - If true, draws filled rectangle (default: false)
Example:
// Draw window with border
const blue = rgba8(0, 100, 200);
const white = rgba8(255, 255, 255);

rect(100, 100, 200, 150, blue, true);  // Fill
rect(100, 100, 200, 150, white, false); // Border
rectfill(x, y, w, h, color)

Shortcut for drawing a filled rectangle (equivalent to rect(x, y, w, h, color, true)).

circle(x, y, radius, color, fill = false)

Draws a circle using midpoint circle algorithm (Bresenham).

x, y number - Center position
radius number - Circle radius in pixels
color BigInt - Circle color
fill boolean - If true, draws filled circle (default: false)
Example: Draw sun
const yellow = rgba8(255, 255, 0);
const orange = rgba8(255, 150, 0);

circle(100, 100, 30, yellow, true);  // Filled inner
circle(100, 100, 40, orange, false); // Outline glow
print(text, x, y, color = rgba8(255,255,255,255), scale = 1)

Draws text using the bitmap font system.

text string - Text to display
x, y number - Position
color BigInt - Text color (default: white)
scale number - Text scale multiplier (default: 1)
Example: HUD display
const white = rgba8(255, 255, 255);
const cyan = rgba8(0, 255, 255);

print("SCORE: " + score, 10, 10, white);
print("GAME OVER", 250, 180, cyan, 2); // 2x scale

💡 Usage Tips

Performance
  • Use rectfill() or cls() for large filled areas instead of many pset() calls
  • Cache color values (rgba8 returns) instead of recalculating each frame
  • Camera offset is applied to all coordinates automatically - no need for manual adjustment
Common Patterns
  • HUD Elements: Set camera to (0, 0) before drawing UI to keep it fixed on screen
  • Layering: Draw background first, then objects, then foreground/UI
  • Alpha Transparency: Lower alpha values (< 255) create semi-transparent effects

📚 Related APIs