直线

• Line
• Line Width
• Line Color
• Line Cap

Line

Line Width

Line Color

Line Cap

曲线

• Arc
• Quadratic Curve
• Bezier Curve

Arc

Quadratic Curve

Bezier Curve

路径

• Path
• Line Join
• Rounded Corners

Path

Line Join

Rounded Corners

形状

• Custom Shape
• Rectangle
• Circle
• Rounded Corners

Custom Shape

Rectangle

Circle

Semicircle

填充

• Color Fill
• Linear Gradient
• Radial Gradient
• Pattern

Color Fill

Linear Gradient

Radial Gradient

Pattern

图像

• Draw Image
• Image Size
• Image Crop
• Pattern

Draw Image

Image Size

Image Crop

Image Loader

文本

• Font, Size & Style
• Text Color
• Image Crop
• Pattern
• Image Size
• Image Crop
• Pattern

Font, Size & Style

Text Color

Text Stroke

Text Align

Text Baseline

Text Metrics

Text Wrap

转换

• Translate
• Scale
• Rotate
• Custom Transform
• Shear
• Mirror
• Reset Transform
• State Stack
• Oval

Translate

Scale

Rotate

Custom Transform

Shear

Mirror

Reset Transform

State Stack

Oval

合成

• Shadows
• Global Alpha
• Clipping Region
• Operations

Shadows

Global Alpha

Clipping Region

Operations

动画

• Clear Canvas
• Animation Frames
• Linear Motion
• Acceleration
• Oscillation
• Start and Stop
• Sprite Animation

Clear Canvas

Animation Frames

Linear Motion

Acceleration

Oscillation

Start and Stop

Sprite Animation

动态图像

• Image Data
• Invert Colors
• Grayscale
• Get Data URL
• Load Data URL
• Save Drawing

Image Data

Invert Colors

Grayscale

Get Data URL

Load Data URL

Save Drawing

视频

• Basic Video
• Simple Drwaing
• Video Grayscale
• Pixel Manipulation

Basic Video

Simple Drwaing

Video Grayscale

Pixel Manipulation

实用库

• Chart.js @GitHub
• paper.js @GitHub
• fabric.js @GitHub
• KineticJS @GitHub
• Phaser @GitHub
• pixi.js @GitHub

应用

• js-objectdetect 手势滑屏 人脸检测
• clmtrackr 视频人脸检测 人脸变形
• 未来的自己