Skip to content

Export to HTML5 Canvas: Last Edge is Missing

Migrated from: https://bugs.launchpad.net/inkscape/+bug/1757053

Summary:

Using the "Save As" > "HTML 5 Canvas (*.html)", the exported HTML includes shapes that are with their last edge missing. When inspecting the source SVG files and the generated canvas, the edges that should apear when closing a path with the m ... z z option (closepath), that edge is missing in the output. The html5 canvas includes all the coordinates written, but doesn't close the path

Steps to reproduce:

  • open Inkscape
  • Create a closed path with straight lines with the Bezier tool, for example a 4 sided polygon
  • Save as a svg file
  • Save a copy as an HTML 5 canvas

What happened?

The canvas, when opened with a browser doesn't have a closed figure, it is missing an edge.

What should have happened?

The canvas, when opened with a browser, should have the same edges as the original SVG file.

Sample attachments:

Star and rectangle:

Quad shape:

Version Info:

- Inkscape Version: 1.1-alpha (d93e359, 2021-01-25)
- Operating System: Windows 10 64bit
- Operating System version: 20H2 (19042.746)
- Inkscape Version: Windows store version 1.0.2 (e86c870879, 2021-01-15, custom)
- Operating System: Windows 10 64bit
- Operating System version: 20H2 (19042.746)

From the original bug, Alvin Penner (apenner) confirmed to reproduce the bug with:

- Inkscape Version: 0.92.3pre0 (f5a6572, 2018-03-03)
- Operating System: Windows 10
- Operating System version: (unknown, comment dated 2018-03-20)

Other info:

Original bug was found with an import of an .ai file. It concerned using stars, but was later generalized to any path. A rectangle, as shown in the attachments, doesn't have this problem. These cases where when the path has been closed using a 'z' command rather than explicitly drawing the last line as noted in a comment.

To upload designs, you'll need to enable LFS and have an admin enable hashed storage. More information