Canvas

Using HTML5 canvas

Using HTML5 Canvas

×
 1: 
 2: 
 3: 
 4: 
 5: 
 6: 
 7: 
 8: 
 9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
[<ReflectedDefinition>]
module Program

open FunScript
open FunScript.TypeScript

let main() =
   let canvas = Globals.document.getElementsByTagName_canvas().[0]
   canvas.width <- 1000.
   canvas.height <- 800.
   let ctx = canvas.getContext_2d()
   ctx.fillStyle <- "rgb(200,0,0)"
   ctx.fillRect (10., 10., 55., 50.);
   ctx.fillStyle <- "rgba(0, 0, 200, 0.5)"
   ctx.fillRect (30., 30., 55., 50.)
   
do Runtime.Run(directory="Web")
Multiple items
type ReflectedDefinitionAttribute =
  inherit Attribute
  new : unit -> ReflectedDefinitionAttribute

Full name: Microsoft.FSharp.Core.ReflectedDefinitionAttribute

--------------------
new : unit -> ReflectedDefinitionAttribute
module Program
namespace FunScript
namespace FunScript.TypeScript
val main : unit -> unit

Full name: Program.main
val canvas : HTMLCanvasElement
type Globals

Full name: FunScript.TypeScript.Globals
property Globals.document: Document
member Document.getElementsByTagName_canvas : unit -> NodeListOf<HTMLCanvasElement>
property HTMLCanvasElement.width: float
property HTMLCanvasElement.height: float
val ctx : CanvasRenderingContext2D
member HTMLCanvasElement.getContext_2d : unit -> CanvasRenderingContext2D
property CanvasRenderingContext2D.fillStyle: obj
member CanvasRenderingContext2D.fillRect : x:float * y:float * w:float * h:float -> unit

Live demo

Click here to open the sample live, running using JavaScript in a dialog window.

To look at the generated JavaScript, view the source of this web page and scroll to the end of the file.

Tutorials

Learn FunScript from the following introductory tutorials

Samples

Browse other amazing samples created with FunScript

Fork me on GitHub