@forgen-org/canvas-drawing v0.1.0

canvas-drawing

A bunch of Javascript functions that make canvas drawing easier

• 🚀 powered by Rust & WebAssembly, so the browser execute binary under the hood
• 🌿 access with a fluent API, clean code first !
• 🎨 Css-like properties names
• 📖 and TS types included

Example with React

import { arrow, line, arrowHead, LineStyle, ellipse, diamond, text, LineCap } from 'canvas-drawing'
import React, { useEffect, useRef } from 'react'

function App() {
  const canvasRef = useRef<HTMLCanvasElement>(null)

  useEffect(() => {
    const context = canvasRef.current.getContext('2d')
    diamond()
      .x(140).y(0).width(60).height(40)
      .borderColor('yellow').backgroundColor('grey')
      .draw(context)

    ellipse().x(160).y(60).width(60).height(40)
      .borderColor('white')
      .borderStyle(LineStyle.Dashed)
      .draw(context)

    text("Hello").start(10, 90)
      .color('#FFF').fontSize(34)
      .draw(context)

    arrow()
      .body(
        line().from(10, 10).to(120, 100).width(6)
        .color('white').cap(LineCap.Round).quadraticCurve(160, 10)
      )
      .head(
        arrowHead().color('red').width(6).size(16)
      )
      .draw(context)

  }, [])
  return (
    <canvas ref={canvasRef} />
  )

}

text

    text("This is an auto cropped text based on the maxWidth property")
      .start(0, 40)
      .color('#FFF')
      .fontSize(18)
      .maxWidth(200)
      .fontFamily("Arial")
      .draw(context)
    line().from(200,0).to(200,100).width(2).color('red').draw(context)

line

arrow

arrowHead

rectangle, ellipse, diamond