.NET to Javascript compiler

C# code   Html page   Start
public class CanvasApp
{
    static int counter;
    static HtmlCanvasElement canvas;

    static readonly Action<CanvasRenderingContext2D>[] renderers = new Action<CanvasRenderingContext2D>[]
    {
        delegate(CanvasRenderingContext2D ctx)
        {
            ctx.BeginPath();
            ctx.LineWidth = 3;
            ctx.SetStrokeStyle(Color.Blue.Css);
            ctx.SetFillStyle(Color.Red.Css);
            ctx.MoveTo(0, 0);
            ctx.LineTo(150, 150);
            ctx.LineTo(200, 150);
            ctx.ClosePath();
            ctx.Fill();
            ctx.Stroke();    
        },
        delegate(CanvasRenderingContext2D ctx)
        {
            ctx.SetFillStyle("red");
            ctx.FillRect(5, 5, 200, 200);
            ctx.SetFillStyle(Color.FromArgb(128, 0, 50, 200).Css);
            ctx.FillRect(55, 55, 200, 200);
            ctx.SetFillStyle(Color.FromArgb(128, 0, 255, 10).Css);
            ctx.FillRect(100, 100, 200, 200);
        },
        delegate(CanvasRenderingContext2D ctx)
        {
            ctx.BeginPath();
            ctx.SetStrokeStyle(Color.Blue.Css);
            ctx.LineWidth = 5;
            ctx.MoveTo(200, 110);
            ctx.LineTo(50, 110);
            ctx.LineTo(300, 310);
            ctx.LineTo(200, 10);
            ctx.LineTo(100, 310);
            ctx.LineTo(350, 110);
            ctx.LineTo(100, 110);
            ctx.Stroke();
            ctx.SetFillStyle(Color.Yellow.Css);
            ctx.Fill();
        },
        delegate(CanvasRenderingContext2D ctx)
        {
            ctx.TextBaseline = CanvasTextBaseline.Hanging;
            ctx.FillText("HTML5", 0, 0);
        },
        delegate(CanvasRenderingContext2D ctx)
        {
            for (int i = 0; i < 2; i++)                            // Step through two rows.
            {
                for (var j = 0; j < 3; j++)                        // Step through three versions.    
                {
                    ctx.BeginPath();
                    var x = 75 + j * 125;               // The x-coordinate.
                    var y = 75 + i * 125;               // The y-coordinate. 
                    var radius = 50;                    // The arc radius.
                    var startAngle = 0;                     // The starting point on the circle.
                    var endAngle = Math.PI + (Math.PI * j) / 2; // The end point on the circle.
                    var anticlockwise = i % 2 == 0 ? false : true; // The direction of drawing.
                    ctx.LineWidth = 4;
                    ctx.Arc(x, y, radius, startAngle, endAngle, anticlockwise); // Create the arc path.
                    ctx.Stroke();                               // Display the work.
                }
            }
        },
        delegate(CanvasRenderingContext2D ctx)
        {
            ctx.BeginPath();
            ctx.LineWidth = 3;
            ctx.SetStrokeStyle(Color.Blue.Css);
            ctx.MoveTo(80, 100);
            ctx.LineTo(240, 100);
            ctx.MoveTo(200, 60);
            ctx.LineTo(200, 220);
            ctx.Stroke();           // Draw it.

            // Create two lines that have a connecting arc that could be used as a start to a rounded rectangle.
            ctx.BeginPath();
            ctx.SetStrokeStyle(Color.Black.Css);
            ctx.LineWidth = 5;
            ctx.MoveTo(120, 100);   // Create a starting point.
            ctx.LineTo(180, 100);   // Draw a horizontal line. 
            ctx.ArcTo(200, 100, 200, 120, 20); // Create an arc.
            ctx.LineTo(200, 180);    // Continue with a vertical line of the rectangle.    
            ctx.Stroke();           // Draw it.           
            // Use the translate method to move the second example down. 
            ctx.Translate(0, 220);   // Move all y-coordinates down 220 pixels to see more clearly.
            // Draw the imaginary tangents in blue.            
            ctx.BeginPath();
            ctx.SetStrokeStyle(Color.Blue.Css);
            ctx.LineWidth = 3;
            ctx.MoveTo(200, 60);
            ctx.LineTo(200, 220);
            ctx.MoveTo(220, 80);
            ctx.LineTo(120, 180);
            ctx.Stroke();
            // Create a line, move the last path point to a point below, and then create an arc.
            ctx.BeginPath();
            ctx.SetStrokeStyle(Color.Black.Css);
            ctx.LineWidth = 5;
            ctx.MoveTo(120, 100);   // Same starting point as above.
            ctx.LineTo(180, 100);   // Same horizontal line as above.
            ctx.MoveTo(180, 120);    // Move the last path point down 20 pixels.
            ctx.ArcTo(200, 100, 200, 120, 20); // Create an arc.
            ctx.LineTo(200, 180);    // Continue with a vertical line of the rectangle.                                                   
            ctx.Stroke();
            ctx.Translate(0, -220);   // Move all y-coordinates down 220 pixels to see more clearly.
        },
        delegate(CanvasRenderingContext2D ctx)
        {
            ctx.Font = "italic 200 36px/2 Unknown Font, sans-serif";
            ctx.SetStrokeStyle("Blue");
            ctx.SetFillStyle("Red");  // set fill color to red
            ctx.LineWidth = 3;  //  set stroke width to 3pmx
            
            for (int i = 0; i < 450; i += 45)
            {
                ctx.StrokeText("Hello World", i, i);
                ctx.FillText("Hello World", i, i);
            }
        },
        delegate(CanvasRenderingContext2D ctx)
        {
            CanvasGradient gradient = ctx.CreateLinearGradient(0, 0, canvas.OffsetWidth, 0);
            // Add the colors with fixed stops at 1/4 of the width.
            gradient.AddColorStop(0, "magenta");
            gradient.AddColorStop(0.25, "blue");
            gradient.AddColorStop(0.50, "green");
            gradient.AddColorStop(0.75, "yellow");
            gradient.AddColorStop(1, "red");

            // Use the gradient.
            ctx.Font = "italic 200 36px/2 Unknown Font, sans-serif";
            ctx.SetFillStyle(gradient);
            for (int i = 0; i < 450; i += 50)
            {
                ctx.FillText("Hello World", i, i);
            }
        },
        delegate(CanvasRenderingContext2D ctx)
        {
            CanvasGradient gradient = ctx.CreateLinearGradient(0, 0, canvas.OffsetWidth, 0);
            // Add the colors with fixed stops at 1/4 of the width.
            gradient.AddColorStop(0, "magenta");
            gradient.AddColorStop(0.25, "blue");
            gradient.AddColorStop(0.50, "green");
            gradient.AddColorStop(0.75, "yellow");
            gradient.AddColorStop(1, "red");
            ctx.SetFillStyle(gradient);
            ctx.FillRect(0, 0, 300, 250);
            ctx.FillRect(250, 300, 600, 500);
        },
        delegate(CanvasRenderingContext2D ctx)
        {
            ctx.ClearRect(0, 0, canvas.Width, canvas.Height); // Clear area for repeated use
            //  Set the angle between each vertex (5 internal, 5 external)
            double vertAngle = (2 * Math.PI) / 10;

            //  Size of star
            double radius = 175;

            //  Star center point
            double[] starCenter = new double[] {0, 0};
            double cW = canvas.Width / 2;
            double cH = canvas.Height / 2;

            //  Translate our coordinates so 0,0 is in the center of the canvas
            ctx.Translate(cW, cH);

            //  And rotate it 1 degrees
            ctx.Rotate((15.0 * Math.PI) / 180);

            //  Start shape, blue lines, yellow fill
            ctx.BeginPath();
          
            //  Build the star hitting 10 points (11 to complete)
            for (int i = 11; i != 0; i--) {
                double r = radius * (i % 2 + 1) / 2;  // Alternate between inside and outside points
                double curAngle = vertAngle * i;  //  Calculate angle of the current point
                ctx.LineTo((r * Math.Sin(curAngle)) + starCenter[0], (r * Math.Cos(curAngle)) + starCenter[1]);
            }

            //  Fill and stroke
            ctx.SetStrokeStyle("blue");
            ctx.LineWidth = 5;
            ctx.SetFillStyle("yellow");
            ctx.Stroke();
            ctx.Fill();
        },
        delegate(CanvasRenderingContext2D ctx)
        {
            CanvasGradient gradient = ctx.CreateRadialGradient(canvas.Width / 2, canvas.Height / 2, 0, canvas.Width / 2, canvas.Height / 2, Math.Max(canvas.Width / 2, canvas.Height / 2));
            gradient.AddColorStop(0, "magenta");
            gradient.AddColorStop(0.25, "blue");
            gradient.AddColorStop(0.50, "green");
            gradient.AddColorStop(0.75, "yellow");
            gradient.AddColorStop(1, "red");
            ctx.SetFillStyle(gradient);
            ctx.FillRect(0, 0, canvas.Width, canvas.Height);
        },
        delegate(CanvasRenderingContext2D ctx)
        {
            HtmlImg image = (HtmlImg)HtmlDocument.Current.GetElementById("img");
            image.Style.Display = StyleDisplay.Default; // remove original image
            // Straight draw. 
            ctx.DrawImage(image, 1, 1);
            ctx.SetFillStyle("black");
            ctx.FillText("Original", 5, 115); // label the original
            // Stretch the image a bit.
            ctx.DrawImage(image, 125, 125, 200, 200);
            // Draw it in pieces.
            ctx.DrawImage(image, 1, 1, image.OffsetWidth / 2, image.OffsetHeight / 2, 50, 125, 50, 50);
            ctx.DrawImage(image, 1, image.OffsetHeight / 2, image.OffsetWidth / 2, image.OffsetHeight / 2, 50, 275, 50, 50);
            ctx.DrawImage(image, image.OffsetWidth / 2, 1, image.OffsetWidth / 2, image.OffsetHeight / 2, 350, 125, 50, 50);
            ctx.DrawImage(image, image.OffsetWidth / 2, image.OffsetHeight / 2, image.OffsetWidth / 2, image.OffsetHeight / 2, 350, 275, 50, 50);
            image.Style.Display = StyleDisplay.None; // remove original image
        }
    };

    public static void Start()
    {
        counter = 0;
        canvas = (HtmlCanvasElement)HtmlDocument.Current.GetElementById("canvas");
        canvas.Width = canvas.OffsetWidth;
        canvas.Height = canvas.OffsetHeight;
        Show();
    }

    static void Show()
    {
        CanvasRenderingContext2D ctx = canvas.Context2D;
        if(ctx != null)
        {
            ctx.Save();
            ctx.ClearRect(0, 0, canvas.Width, canvas.Height);
            renderers[counter](ctx);
            ctx.Restore();
        }
    }

    public static void Back()
    {
        counter--;
        if(counter < 0)
        {
            counter = renderers.Length - 1;
        }
        Show();
    }

    public static void Next()
    {
        counter++;
        if(counter == renderers.Length)
        {
            counter = 0;
        }
        Show();
    }
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <meta http-equiv="x-ua-compatible" content="IE=11;IE=10;IE=9;IE=8;IE=7" />
  <title>Canvas.html: Html5 Canvas</title>
  <script type="text/javascript" language="javascript" src="js/canvas.js?v1"></script>
</head>
<body onload="StartScript()">
  Canvas.html: check Html5 Canvas features&#160;
  <input type="button" value="&lt;Back" onclick="Back()" />
  <input type="button" value="Next&gt;" onclick="Next()"/>
  <div style="border:solid 1px black;width:640px;height:480px">
    <canvas id="canvas" draggable="false" style="width:640px;height:480px" width="600" height="480">Sorry, your browser does not support canvas element</canvas>
    <img id="img" src="http://go.microsoft.com/fwlink/?LinkID=199028" style="display:none"/>
  </div>
 </body>
</html>
© 2009 JScriptSuite. All rights reserved.