To create a semicircle with HTML5 Canvas, we can create an arc using the arc() method and define the ending angle has startAngle + PI.
Code Editor
Modified on April 8th, 2013
by Eric Rowell
- 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 Semicircle Tutorial
Tweet