Pixi: Graphics API sample (http://pixijs.github.io/examples/index.html?s=basics&f=graphics.js&title=Graphics)

pixi_graphics.fsx

open System
open Fable.Core
open Fable.Core.JsInterop
open Fable.Import.PIXI
open Fable.Import.Browser


type Options() =
  interface RendererOptions with
    member val antialias = Some(true) with get, set
    member val view = None with get, set
    member val transparent = None with get, set
    member val autoResize = None with get, set
    member val resolution = Some(1.) with get, set
    member val clearBeforeRendering = None with get, set
    member val preserveDrawingBuffer = None with get, set
    member val forceFXAA = None with get, set
    member val roundPixels = None with get, set
    member val backgroundColor = Some(float 0x000000) with get, set

let currentRenderer =
  Globals.autoDetectRenderer( 800., 600., Options() )
  |> unbox<SystemRenderer>

document.body.appendChild( currentRenderer.view )

// create the root of the scene graph
let stage = new Container()
let graphics = new Graphics()

// set a fill and line style
graphics.beginFill(float 0xFF3300)
graphics.lineStyle(4., float 0xffd900, 1.)

// draw a shape
graphics.moveTo(50.,50.)
graphics.lineTo(250., 50.)
graphics.lineTo(100., 100.)
graphics.lineTo(50., 50.)
graphics.endFill()

// set a fill and a line style again and draw a rectangle
graphics.lineStyle(2., float 0x0000FF, 1.)
graphics.beginFill(float 0xFF700B, 1.)
graphics.drawRect(50., 250., 120., 120.)

// draw a rounded rectangle
graphics.lineStyle(2., float 0xFF00FF, 1.)
graphics.beginFill(float 0xFF00BB, 0.25)
graphics.drawRoundedRect(150., 450., 300., 100., 15.)
graphics.endFill()

// draw a circle, set the lineStyle to zero so the circle doesn't have an outline
graphics.lineStyle(0.)
graphics.beginFill(float 0xFFFF0B, 0.5)
graphics.drawCircle(470., 90.,60.)
graphics.endFill()

stage.addChild(graphics)
currentRenderer.render(stage)

printfn( "done")