Arc
Learn how to draw arcs on HTML5 Canvas with Konva.js. Set inner/outer radius, angle, and clockwise direction with the Konva.Arc shape.
Arrow
Learn how to draw arrows on HTML5 Canvas with Konva.js. Create arrows with customizable pointers, stroke, and fill using the Konva.Arrow shape.
Circle
Learn how to draw circles on HTML5 Canvas with Konva.js. Set radius, fill, stroke, opacity, and shadows with the Konva.Circle shape.
Custom Shape
Learn how to draw custom shapes on HTML5 Canvas with Konva.js. Use the Konva.Shape sceneFunc to create any shape with the native Canvas 2D context.
Ellipse
Learn how to draw ellipses on HTML5 Canvas with Konva.js. Set radiusX, radiusY, fill, stroke, and more with the Konva.Ellipse shape.
Group
Learn how to group shapes on HTML5 Canvas with Konva.js. Use Konva.Group to move, rotate, and scale multiple shapes together.
Image
Learn how to draw images on HTML5 Canvas with Konva.js. Load images from URLs, crop, resize, and apply filters with the Konva.Image shape.
Label
Learn how to draw labels with text and tags on HTML5 Canvas with Konva.js. Create tooltips, callouts, and annotations using the Konva.Label shape.
Line
Learn how to draw lines on HTML5 Canvas with Konva.js. Create simple lines, splines, polygons, and blobs with the Konva.Line shape.
Line - Blob
Learn how to draw blob shapes on the HTML5 canvas with Konva using Konva.Line with closed and tension properties.
Line - Polygon
Learn how to draw polygon shapes on the HTML5 canvas with Konva using Konva.Line with the closed property set to true.
Line - Simple Line
Learn how to draw simple lines, dashed lines, and dotted lines on the HTML5 canvas using Konva.Line.
Line - Spline
Learn how to draw smooth curved spline lines on the HTML5 canvas with Konva using Konva.Line with the tension property.
Path
Learn how to draw custom paths on HTML5 Canvas with Konva.js using SVG path data. Create complex shapes with the Konva.Path shape.
Rectangle
Learn how to draw rectangles on HTML5 Canvas with Konva.js. Set fill, stroke, size, position, corner radius, shadows, and more with the Konva.Rect shape.
Regular Polygon
Learn how to draw regular polygons (triangles, pentagons, hexagons) on HTML5 Canvas with Konva.js using the Konva.RegularPolygon shape.
Ring
Learn how to draw rings (donuts) on HTML5 Canvas with Konva.js. Set inner and outer radius with the Konva.Ring shape.
Sprite
Learn how to use sprite sheets for animation on HTML5 Canvas with Konva.js. Play frame-based animations using the Konva.Sprite shape.
Star
Learn how to draw stars on HTML5 Canvas with Konva.js. Set inner/outer radius, number of points, fill, and stroke with the Konva.Star shape.
Text
Learn how to draw text on HTML5 Canvas with Konva.js. Set font family, size, style, alignment, wrapping, padding, and decoration with the Konva.Text shape.
TextPath
Learn how to draw text along a path on HTML5 Canvas with Konva.js. Render curved or circular text using the Konva.TextPath shape.
Wedge
Learn how to draw wedges (pie slices) on HTML5 Canvas with Konva.js. Set angle, radius, and rotation with the Konva.Wedge shape.