Canvas Settings Functions

Klint provides functions for configuring canvas behavior and origin settings.

setCanvasOrigin

setCanvasOrigin(type: "center" | "corner") => void

Sets the coordinate system origin for the canvas.

• type: "corner" (default, top-left) or "center" (center of canvas)

setCanvasOrigin("center") // (0,0) is center of canvas

setImageOrigin

setImageOrigin(type: "center" | "corner") => void

Sets the reference point for image placement.

• type: "corner" (default, top-left) or "center" (center of image)

setImageOrigin("center") // Images positioned from their center

setRectOrigin

setRectOrigin(type: "center" | "corner") => void

Sets the reference point for rectangle placement.

• type: "corner" (default, top-left) or "center" (center of rectangle)

setRectOrigin("center") // Rectangles positioned from their center

background

background(color?: string) => void

Sets the canvas background color or clears the canvas.

background("#FFFFFF") // White background
background("transparent") // Clear canvas
background() // Clear canvas

smooth

smooth() => void

Enables image smoothing (anti-aliasing) for image and canvas rendering. This is the default behavior.

smooth() // Enable anti-aliasing (default)

noSmooth

noSmooth() => void

Disables image smoothing (anti-aliasing). Useful for pixel art, retro aesthetics, or when scaling offscreen canvases where you want crisp pixel edges.

noSmooth() // Disable anti-aliasing for crisp pixels

reset

reset() => void

Clears canvas and resets the transformation matrix.

reset() // Clear everything and reset transforms

clear

clear() => void

Clears the canvas without resetting transformations.

clear() // Just clear pixels, keep transforms

resizeCanvas

! Offscreen canvas only !

resizeCanvas(width: number, height: number) => void

Resizes the canvas dimensions.

resizeCanvas(800, 600) // Change canvas size

toBase64

toBase64(type?: string, quality?: number) => string

Converts canvas to a base64 encoded data URL.

• type: MIME type (default: "image/png")
• quality: Compression quality for JPEGs (0-1)

const dataUrl = toBase64("image/jpeg", 0.85)

Example

const setup = (K: KlintContext) => {
  // Set up canvas with centered coordinates
  K.setCanvasOrigin("center")
  K.setImageOrigin("center")
  K.setRectOrigin("center")
}

const draw = (K: KlintContext) => {
  // With center origin, (0,0) is center of canvas
  K.background("#222")
  
  // Draw at origin (center of canvas)
  K.fillColor("red")
  K.rectangle(0, 0, 100, 100)
  
  // Draw image from its center
  const img = K.images["logo"]
  if (img) {
    K.image(img, 0, -150)
  }
  
  // Export canvas to base64 on first frame
  if (K.frameCount === 1) {
    const dataUrl = K.toBase64("image/png")
    console.log(dataUrl)
  }
}

Notes

• Most often, you'll want all three origin settings to match for consistency
• The background() function automatically respects canvas origin settings
• reset() and clear() are useful when redrawing the entire canvas
• resizeCanvas() only works with offscreen canvases, not the main canvas
• Origin settings affect all subsequent drawing operations
• noSmooth() is especially useful when drawing scaled offscreen canvases or pixel art