Canvas attempt

canvas.fs

    [<JavaScript>]
    let lineTo (context : Cvs) x1 y1 x2 y2 =
        context.MoveTo (x1, y1)
        context.LineTo (x2, y2)

    [<JavaScript>]
    let horiz context y x1 x2 = lineTo context x1 y x2 y

    [<JavaScript>]
    let vert context x y1 y2 = lineTo context x y1 x y2

    type App() =
        inherit Web.Control()

        [<JavaScript>]
        override this.Body =
            let canvas = HTML5.Tags.Canvas [Id "c"; Attr.Style "border:1px dotted"; Width "800"; Height "800"]

            let drawGrid (context : Cvs) =
                [0.5..10.5..800.0]
                |> Seq.iter (fun x ->
                    vert context x 0. 800.
                    horiz context x 0. 800.)

                context.StrokeStyle <- "#eee"
                context.Stroke()

            let drawArrow flip (context : Cvs) =
                let lineTo = lineTo context |> flip
                let horiz y x1 x2 = lineTo x1 y x2 y
                context.BeginPath()
                horiz 40. 0. 390.
                horiz 40. 410. 800.
                lineTo 800. 40. 795. 35.
                lineTo 800. 40. 795. 45.
                context.StrokeStyle <- "#000"
                context.Stroke()

            let button = Button [Text "Ok Go"] |>! OnClick (fun _ _ ->
                let canvas = Dom.Document.Current.GetElementById "c"
                (canvas |> As<Html5.CanvasElement>).GetContext("2d")
                |>! drawGrid
                |>! drawArrow id
                |> drawArrow (fun f x1 y1 x2 y2 -> f y1 x1 y2 x2))

            Div [button; canvas] :> _