Canvas backend and module functors

examples/axes.ml

@@ -1,11 +1,12 @@
 (* simple example demonstrating drawing x and y axes for debugging or plots *)
-open Joy
+
+open Joy.Svg
 
 let _ =
   (* intialize rendering context with the axes flag set to true *)
   init ~axes:true ();
   (* set background to opaque white *)
   let c = circle 50 in
-  render c;
+  show [ c ];
   (* Write to PNG! *)
   write ~filename:"axes.png" ()

examples/canvas.ml

@@ -0,0 +1,7 @@
+open Joy.Canvas
+
+let () =
+  init ~size:(400, 400) ();
+  let c = circle 100 in
+  let r = rectangle 200 150 in
+  show [ c; r ]

examples/circle.ml

@@ -1,7 +1,7 @@
-open Joy
+open Joy.Svg
 
 let () =
   init ();
   let c = circle 50 in
-  render c;
+  show [ c ];
   write ~filename:"circle.png" ()

examples/circle_packing.ml

@@ -1,4 +1,4 @@
-open Joy
+open Joy.Svg
 
 (* global constants // RNG initialization *)
 let w, h = (900., 900.)
@@ -94,9 +94,7 @@ let () =
   let circles =
     List.map
       (fun ((x, y), radius) ->
-        circle
-          ~c:{x; y}
-          (int_of_float radius)
+        circle ~c:{ x; y } (int_of_float radius)
         |> with_stroke (rand_nth palette))
       concentric
   in

examples/circle_row_joy.ml

@@ -1,4 +1,4 @@
-open Joy
+open Joy.Svg
 
 let () =
   init ();

examples/color.ml

@@ -1,7 +1,7 @@
-open Joy
+open Joy.Svg
 
 let _ =
   init ();
   let c = circle 50 |> with_stroke red in
-  render c;
+  show [ c ];
   write ~filename:"color.png" ()

examples/complex.ml

@@ -1,4 +1,4 @@
-open Joy
+open Joy.Svg
 
 (*
    Complex shapes can also be created from lists of shapes.

examples/concentric_circles.ml

@@ -1,4 +1,4 @@
-open Joy
+open Joy.Svg
 
 let () =
   init ();
@@ -12,5 +12,5 @@ let () =
     | _, _ -> arr
   in
   let circles = complex (make_concentric [] 21) in
-  render circles;
+  show [ circles ];
   write ~filename:"concentric_circles.png" ()

examples/donut_with_scale.ml

@@ -1,4 +1,4 @@
-open Joy
+open Joy.Svg
 
 let () =
   init ();

examples/dune

@@ -103,6 +103,12 @@
  (modules donut_with_scale)
  (libraries joy))
 
+(executable
+ (name canvas)
+ (modes js)
+ (modules canvas)
+ (libraries joy))
+
 (executable
  (name color)
  (modules color)

examples/ellipse.ml

@@ -1,9 +1,9 @@
-open Joy
+open Joy.Svg
 
 let () =
   init ();
   (* create an ellipse *)
   let e = ellipse 100 75 in
   (* render it *)
-  render e;
+  show [ e ];
   write ~filename:"ellipse.png" ()

examples/higher_transforms.ml

@@ -1,4 +1,4 @@
-open Joy
+open Joy.Svg
 
 (* Higher order transformations can be composed with `comp`,
    which applies its function args right-to-left.
@@ -10,5 +10,5 @@ let () =
   init ();
   let initial = rectangle ~c:(point (-250) (-250)) 100 100 in
   let shapes = repeat 32 transform initial in
-  render shapes;
+  show [ shapes ];
   write ~filename:"higher_transforms.png" ()

examples/line.ml

@@ -1,4 +1,4 @@
-open Joy
+open Joy.Svg
 
 let size = 800
 let interval = 16

examples/polygon.ml

@@ -1,4 +1,4 @@
-open Joy
+open Joy.Svg
 
 let size = 100.
 
@@ -8,5 +8,5 @@ let () =
     polygon
       [ { x = -.size; y = 0. }; { x = 0.; y = size }; { x = size; y = 0. } ]
   in
-  render poly;
+  show [ poly ];
   write ~filename:"polygon.png" ()

examples/rectangle.ml

@@ -1,4 +1,4 @@
-open Joy
+open Joy.Svg
 
 let () =
   init ();

examples/rectangle_canvas.ml

@@ -1,4 +1,4 @@
-open Joy
+open Joy.Svg
 
 let () =
   init ~size:(500, 300) ();

examples/repeat.ml

@@ -1,4 +1,4 @@
-open Joy
+open Joy.Svg
 
 (*
     demonstration of the repeat function
@@ -12,5 +12,5 @@ let () =
   init ();
   let circle = circle ~c:(point (-100) 0) 50 in
   let shapes = repeat 10 (translate 10 0) circle in
-  render shapes;
+  show [ shapes ];
   write ~filename:"repeat.png" ()

examples/rotate.ml

@@ -1,4 +1,4 @@
-open Joy
+open Joy.Svg
 
 let max = 32.
 let rec range a b = if a > b then [] else a :: range (a +. 1.) b

examples/square.ml

@@ -1,4 +1,4 @@
-open Joy
+open Joy.Svg
 
 let () =
   init ();

examples/star.ml

@@ -1,4 +1,4 @@
-open Joy
+open Joy.Svg
 
 let outer_radius = 200.
 let inner_radius = 80.
@@ -18,5 +18,5 @@ let () =
   init ();
   set_line_width 3;
   let star = List.init points star_section |> List.flatten |> polygon in
-  render star;
+  show [ star ];
   write ~filename:"star.png" ()

examples/translate_circle.ml

@@ -1,4 +1,4 @@
-open Joy
+open Joy.Svg
 
 let () =
   init ();

examples/translate_ellipse.ml

@@ -1,4 +1,4 @@
-open Joy
+open Joy.Svg
 
 let () =
   init ();

examples/translate_rectangle.ml

@@ -1,4 +1,4 @@
-open Joy
+open Joy.Svg
 
 let () =
   init ();

examples/triangle.ml

@@ -1,4 +1,4 @@
-open Joy
+open Joy.Svg
 
 let size = 100.
 
@@ -8,5 +8,5 @@ let () =
     polygon
       [ { x = -.size; y = 0. }; { x = 0.; y = size }; { x = size; y = 0. } ]
   in
-  render triangle;
+  show [ triangle ];
   write ~filename:"triangle.png" ()

index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Joy</title>
+  </head>
+  <body>
+    <script type="module" src="./_build/default/examples/canvas.bc.js"></script>
+  </body>
+</html>