canvas

Small helpers for creating a canvas element and drawing to its 2D context.

Import: @rtorcato/browser-common/canvas

📖 MDN: Canvas API

Browser support

API	Chrome	Edge	Firefox	Safari	iOS Safari	Baseline
HTMLCanvasElement	✅ 1+	✅ 12+	✅ 1.5+	✅ 2+	✅ 1+	Widely available
CanvasRenderingContext2D	✅ 1+	✅ 12+	✅ 1.5+	✅ 2+	✅ 1+	Widely available

✅ supported · ◐ partial · ❌ not supported · [n] see note. Generated from MDN browser-compat-data and web-features. caniuse: HTMLCanvasElement · CanvasRenderingContext2D

Example

import {
  createCanvas,
  fillCanvas,
  drawImageOnCanvas,
  canvasToDataURL,
} from '@rtorcato/browser-common/canvas'

const canvas = createCanvas(640, 480)
document.body.append(canvas)

fillCanvas(canvas, '#fafafa')
drawImageOnCanvas(canvas, image, 10, 20)

const png = canvasToDataURL(canvas)

Exports

• createCanvas(width, height) — creates an HTMLCanvasElement
• getCanvasContext2D(canvas) — returns the 2D rendering context, or null
• clearCanvas(canvas) — clears the entire canvas
• drawImageOnCanvas(canvas, image, dx, dy) — draws an image onto the canvas
• canvasToDataURL(canvas, type?, quality?) — converts canvas content to a data URL
• fillCanvas(canvas, color) — fills the entire canvas with a color

See the API reference for full signatures.