To create a rectangle with KineticJS, we can instantiate a Kinetic.Rect() object. For a full list of attributes and methods, check out the Kinetic.Rect documentation.
Code Editor
Modified on May 17th, 2013
by Eric Rowell
- 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
- Filters
- Invert
- Grayscale
- Brighten
- Blur
- Tweens
- Linear Easing
- Common Easings
- All Easings
- Finish Event
- All Controls
- Tween Filter
- Animations
- Create 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 Rect Tutorial
Tweet