Using Path2D for stroke not fill?

[BarbaraWebb]

It seems like you can use Path2D as a shortcut to create paths only if you want to then draw it as a filled path, but not as a stroke? canvas.fill will take a path as an argument but canvas.stroke will not. If I want to draw a complex shape that shows only as a line drawing (and repeat that shape several times in different places) what is the best way to do it?

[martinRenou]

Indeed, this looks like a missing feature from ipycanvas, the HTML canvas provides a way to give the path2d to stroke https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/stroke#parameters

[cleemesser]

I recently added this ability to stroke a Path2D to ipycanvas as an exercise. See https://github.com/cleemesser/ipycanvas.
I can put in a pull request for what I've done.
Caveats: I am a neophyte to ipywidget creation and I have not be writing javascript much these days so I am trying to refresh my skills.
and I have not read the requirements for contributing.

[martinRenou]

Woot woot! A PR would be very welcome indeed :)

I've briefly looked at your commit, it looks perfect to me

[cleemesser]

@BarbaraWebb The PR has been accepted, so the next release of ipycanvas (version 0.13.3) should support your use case. Here is an example that I was thinking of using for the documentation.

Using Path2D

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. ipycanvas does not (yet) support Path2D methods like Path2D.move_to, draw_line, etc.
Using the Path2D class is very useful and efficient when you want to reuse the same path multiple times. Path2D objects may be stroked or filled.

See https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths for documentation about SVG paths.

• Path2D(value):
  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)

    # draw a sinusoidal curve using quadratic bezier curves
    path5 = Path2D("M 10 150 Q 52.5 10 95 150 T 180 150")
    canvas.line_width = 2.5
    canvas.stroke_style = "black"
    canvas.stroke(path5)
    canvas