Convert System.Drawing.Graphics to html5 canvas methods via Script#

Question

Is it possible to convert standart System.Drawing.Graphics methods such as DrawImage, DrawPath and other to html5 canvas methods such as context.drawImage and context.beginPath(); ... context.closePath(); respectively via Script# or other C# to JS converters?

How can I do it automatically without .js file editing after compilation?

Answer 1

I had the same issue.

The way you draw on the canvas is not completely the same as by using System.Drawing.Graphics. A solution is to create an abstraction over System.Drawing.Graphics like this:

public interface IDrawingContext{
   void Save();
   void Restore();
   void DrawLine(int x1, int y1, int x2, int y2, string color, int strokeWidth);
   void DrawText(int x, int y, string text, string color);
   object DrawRect(int x, int y, int width, int height, object fill, string strokeColor);
   object DrawPoly(List<Coordinate> points, object fill, string strokeColor, int strokeWidth);
   object DrawCircle(int x, int y, int radius, object fill, string strokeColor);
   object Transform(int translateX, int translateY, int rotate);
   .
   .
   .
   void Clear();
}

In the script# creat a class that implements this interface and made the calls native to the canvas using the script# System.Html.Media.Graphics namespace. In the C# project do the same but use System.Drawing.Graphics

Next thing is refactoring the existing drawing code to use IDrawingContext instead of System.Drawing.Graphics