Search code examples
c#htmlhtml5-canvasgdi+

How to convert GDI+ GraphicsPath to HTML5 canvas Path?


Is there a library that would help to convert GDI+ GraphicsPath to HTML5 canvas Path? Or do I have to manually run through all GraphicsPath.PathPoints and GraphicsPath.PathTypes to emit corresponding HTML5 code (if so please share any hints)?


Solution

  • Unfortunately I couldn't find anything useful. Some people suggested using SVG as a way to "transport" curves from GDI to Canvas, but I couldn't find any decent SVG library for .NET. It took me quite some time to understand how the data inside GraphicsPath is stored because it is not as straightforward as you might think. This is what I've came up to.

    Knowing how GraphicsPath actually work I've managed to recreate it using bunch of HTML5 functions: .moveTo(), .lineTo() and .bezierCurveTo(). The result was pretty neat although final string building takes some time and resulting JS files sometimes contain tenths of thousands lines of code if source GraphicsPath represents long text written with fancy font. Surprisingly Firefox handles them without problems.

    I won't paste the code that I'm using as it is nothing special as long as you read and understand my answer from another SO question.