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

1import { arrow, line, arrowHead, LineStyle, ellipse, diamond, text, LineCap } from 'canvas-drawing'
2import React, { useEffect, useRef } from 'react'
3
4function App() {
5  const canvasRef = useRef<HTMLCanvasElement>(null)
6
7  useEffect(() => {
8    const context = canvasRef.current.getContext('2d')
9    diamond()
10      .x(140).y(0).width(60).height(40)
11      .borderColor('yellow').backgroundColor('grey')
12      .draw(context)
13
14    ellipse().x(160).y(60).width(60).height(40)
15      .borderColor('white')
16      .borderStyle(LineStyle.Dashed)
17      .draw(context)
18
19    text("Hello").start(10, 90)
20      .color('#FFF').fontSize(34)
21      .draw(context)
22
23    arrow()
24      .body(
25        line().from(10, 10).to(120, 100).width(6)
26        .color('white').cap(LineCap.Round).quadraticCurve(160, 10)
27      )
28      .head(
29        arrowHead().color('red').width(6).size(16)
30      )
31      .draw(context)
32
33  }, [])
34  return (
35    <canvas ref={canvasRef} />
36  )
37
38}

text

Parameter	Type	Description
start	x: number, y: number	postion of the start point
value	string	text content
fontSize	number
fontFamily	string
color	string	A string parsed as CSS color or a CanvasGradient object
borderColor	string
lineHeight	number	Ratio based on font-size. Default: 1.2.
maxWidth	number	If given, text will be cropped and multi-lined automatically.
lineWeight	LineWeight	Normal, Light, Bold
bold		Shortup for setting lineWeight to Bold
lineStyle	LineStyle	Normal, Italic, Oblique. Italic vs Oblic : Italic is described in the font declaration. Oblique is a browser text slant.
italic		Shortup for setting lineStyle to Italic
underline	bool	undefined

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

line

Parameter	Type	Description
from	x: number, y: number	postion of the start point
to	x: number, y: number	position of the end point
width	number	width of the line
style	LineStyle	Default: LineStyle.SOLID
cap	LineCap	Default: LineCap.BUTT
color	string	A string parsed as CSS color or a CanvasGradient object
quadraticCurve	x: number, y: number	The quadratic curve control point
bezierCurve	x1: number, y1: number, x2: number, y2: number	The bezier curve control points

arrow

Parameter	Type
body	Line
head	ArrowHead

arrowHead

Parameter	Type	Description
width	number	width of the line
size	number	arrow head size
color	string	A string parsed as CSS color or a CanvasGradient object

rectangle, ellipse, diamond

Parameter	Type	Description
x	number	X position of the top left corner
y	number	Y position of the top left corner
width	number	Total width of the rectangle, borders included
height	number	Total height of the rectangle, borders included
opacity	number	Between 0 and 1. Default: 1
backgroundColor	string	A string parsed as CSS color or a CanvasGradient object
borderStyle	LineStyle	Default: LineStyle.SOLID
borderColor	string	A string parsed as CSS color or a CanvasGradient object
borderWidth	number	Default: 4