There are two ways for creating and drawing a path in ipycanvas.
You can define a Path2D given an SVG path. Note that once the path is created, it is read only, you cannot dynamically change the path value. Using the Path2D class is very useful and efficient when you want to reuse the same path multiple times.
See https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths for documentation about SVG paths.
Creates a Path2D given the SVG path string value.
from ipycanvas import Canvas, Path2D canvas = Canvas(width=350, height=350) path1 = Path2D("M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z") path2 = Path2D("M230 80 A 45 45, 0, 1, 0, 275 125 L 275 80 Z") path3 = Path2D("M80 230 A 45 45, 0, 0, 1, 125 275 L 125 230 Z") path4 = Path2D("M230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z") canvas.fill_style = "green" canvas.fill(path1) canvas.fill_style = "purple" canvas.fill(path2) canvas.fill_style = "red" canvas.fill(path3) canvas.fill_style = "blue" canvas.fill(path4) canvas
Using Path commands#
A path is a list of points, connected by segments of lines that can be of different shapes, curved or not, of different width and of different color. A path can be closed. To make shapes using paths, we take some extra steps:
First, you create the path with
Then you use drawing commands to add shapes into the path
Once the path has been created, you can
fillthe path to render it
Here are the functions used to perform these steps:
Creates a new path. Once created, future drawing commands are directed into the path and used to build the path up.
Path commands like
Adds a straight line to the path, going to the start of the current path.
Draws the shape by stroking its outline.
Draws a solid shape by filling the path’s content area. The given fill rule is applied, possible rules are nonzero and evenodd.
from ipycanvas import Canvas canvas = Canvas(width=100, height=100) # Draw simple triangle shape canvas.begin_path() canvas.move_to(75, 50) canvas.line_to(100, 75) canvas.line_to(100, 25) canvas.fill() canvas
Here are the available draw commands:
Moves the pen to the coordinates specified by x and y. This does not actually draw anything.
Add a straight line to the current path by connecting the path’s last point to the specified (x, y) coordinates.
arc(x, y, radius, start_angle, end_angle, anticlockwise=False):
Add a circular arc centered at (x, y) with a radius of
radiusto the current path. The path starts at
start_angleand ends at
end_anglein radians, and travels in the direction given by
anticlockwise(defaulting to clockwise: False).
arc_to(x1, y1, x2, y2, radius):
Add a circular arc to the current path. Using the given control points (
y1) and (
y2) and the
ellipse(x, y, radius_x, radius_y, rotation, start_angle, end_angle, anticlockwise=False):
Add an ellipse centered at
(x, y)with the radii
radius_yto the current path.
quadratic_curve_to(cp1x, cp1y, x, y):
Add a quadratic Bezier curve to the current path. It requires two points: the first one is a control point and the second one is the end point. The starting point is the latest point in the current path, which can be changed using
move_to()before creating the quadratic Bezier curve.
bezier_curve_to(cp1x, cp1y, cp2x, cp2y, x, y):
Add a cubic Bezier curve to the current path. It requires three points: the first two are control points and the third one is the end point. The starting point is the latest point in the current path, which can be changed using
move_to()before creating the Bezier curve.
rect(x, y, width, height):
Draws a rectangle whose top-left corner is specified by (
y) with the specified
from math import pi from ipycanvas import Canvas canvas = Canvas(width=200, height=200) # Draw smiley face canvas.begin_path() canvas.arc(75, 75, 50, 0, pi * 2, True) # Outer circle canvas.move_to(110, 75) canvas.arc(75, 75, 35, 0, pi, False) # Mouth (clockwise) canvas.move_to(65, 65) canvas.arc(60, 65, 5, 0, pi * 2, True) # Left eye canvas.move_to(95, 65) canvas.arc(90, 65, 5, 0, pi * 2, True) # Right eye canvas.stroke() canvas
Fill bezier curves#
from ipycanvas import Canvas canvas = Canvas(width=200, height=200) # Cubic curves example canvas.begin_path() canvas.move_to(75, 40) canvas.bezier_curve_to(75, 37, 70, 25, 50, 25) canvas.bezier_curve_to(20, 25, 20, 62.5, 20, 62.5) canvas.bezier_curve_to(20, 80, 40, 102, 75, 120) canvas.bezier_curve_to(110, 102, 130, 80, 130, 62.5) canvas.bezier_curve_to(130, 62.5, 130, 25, 100, 25) canvas.bezier_curve_to(85, 25, 75, 37, 75, 40) canvas.fill() canvas
Change the fill rule#
from math import pi from ipycanvas import Canvas canvas = Canvas(width=100, height=100) canvas.begin_path() canvas.arc(50, 50, 30, 0, pi * 2, True) canvas.arc(50, 50, 15, 0, pi * 2, True) canvas.fill("evenodd") canvas