@daeinc/draw

drawing utilities for HTML5 Canvas.

Install

npm i @daeinc/draw

then,

import { ... } from "@daeinc/draw"

CDN

import { ... } from "https://cdn.jsdelivr.net/npm/@daeinc/draw/dist/draw.esm.js"

Functions

It uses two custom types, Pt and Pts, each representing number[] and Pt[].

import type { Pt, Pts } from "@daeinc/geom";

drawCircle

const drawCircle: (ctx: CanvasRenderingContext2D, pt: Pt, diam: number) => void;

drawFillText

const drawFillText: (
  ctx: CanvasRenderingContext2D,
  msg: string,
  pt: Pt,
) => void;

drawLine

const drawLine: (ctx: CanvasRenderingContext2D, pt1: Pt, pt2: Pt) => void;

drawPath

const drawPath: (
  ctx: CanvasRenderingContext2D,
  path: Pts,
  close?: boolean,
) => void;

drawSmoothPath

const drawSmoothPath: (ctx: CanvasRenderingContext2D, path: Pts) => void;

Uses quadratic curves to smoothen hard edges of path. The input path is expected to be generated with generateSmoothPath() from another package @daeinc/geom.

License

MIT