Tutorials
Basics
Advanced
KineticJS
Three.js
Core Shapes
Rect
Circle
Wedge
Line
Polygon
Image
Sprite
Text
Spline
Blob
Custom
Plugins
Label
RegularPolygon
Star
Path
TextPath
Styling
Fill
Stroke
Opacity
Shadow
Line Join
Hide and Show
Events
Binding Events
Image Events
Mobile Events
Multi-Event
Desktop & Mobile
Remove Event
Remove by Name
Custom Hit Region
Listen for Events
Cancel Propagation
Event Delegation
Fire Events
Drag and Drop
Drag and Drop
Drag an Image
Drag a Group
Drag a Line
Drag the Stage
Drag Events
Simple Drag Bounds
Complex Drag Bounds
Groups and Layers
Groups
Layering
Change Containers
Clipping Regions
Tweens
Linear Easing
Common Easings
All Easings
Finish Event
All Controls
Tween Filter
Animations
Creating an Animation
Moving
Rotating
Scaling
Stop Animation
Selectors
Select by Id
Select by Name
Select by Type
Data & Serialization
Data URL
Serialize Stage
Simple Load
Complex Load
Performance
Shape Caching

HTML5 Canvas KineticJS Text Path Tutorial

To create text along a path with KineticJS, we can instantiate a Kinetic.TextPath() object. For a full list of attributes and methods, check out the Kinetic.TextPath documentation.

Open in new window

Code Editor

< Path Fill >

More Examples

HTML5 Canvas World Map SVG Path with KineticJS
HTML5 Canvas KineticJS SVG Path Tutorial
HTML5 Canvas KineticJS Shadows
HTML5 Canvas KineticJS Text Tutorial
1.8.1 HTML5 Canvas Text Tutorial

Modified on May 17th, 2013 by Eric Rowell