Tutorials
Basics
Advanced
KineticJS
Three.js
HTML5 Canvas
Canvas Element
Lines
Line
Line Width
Line Color
Line Cap
Curves
Arc
Quadratic Curve
Bezier Curve
Paths
Path
Line Join
Rounded Corners
Shapes
Custom Shape
Rectangle
Circle
Semicircle
Fill Styles
Color Fill
Linear Gradient
Radial Gradient
Pattern
Images
Draw Image
Image Size
Image Crop
Image Loader
Text
Font, Size & Style
Text Color
Text Stroke
Text Align
Text Baseline
Text Metrics
Text Wrap

HTML5 Canvas Custom Shape Tutorial

To create a custom shape with HTML5 Canvas, we can create a path and then close it using the closePath() method. We can use the lineTo(), arcTo(), quadraticCurveTo(), or bezierCurveTo() methods to construct each subpath which makes up our shape.

Open in new window

Code Editor

< Rounded Corners Rectangle >

More Examples

HTML5 Canvas Interactive Flower
HTML5 Canvas Modify Curves with Anchor Points Using KineticJS
HTML5 Canvas Physics Simulator with Curve Detection
3.2.6 HTML5 Canvas Curve Detection Tutorial
HTML5 Canvas Harmonic Oscillator

Modified on April 8th, 2013 by Eric Rowell