Canvas with horizontal scrollbar in js_of_ocaml

Question

I am creating a canvas in js_of_ocaml as shown below.

(* create document *) let document = Dom_html.window##document (* function to create canvas *) let create_canvas () = let canvas = Dom_html.createCanvas document in canvas##width <- 500; canvas##height <- 500; canvas (* create canvas *) let canvas = create_canvas () let start _ = let main = get_main () in Dom.appendChild main canvas; Js._false in Dom_html.window##onload <- Dom_html.handler start 

I see only a white screen.
Now I want to add a horizontal scrollbar to the canvas.
I think I should make a box with a horizontal scrollbar that is smaller than the white canvas, and the white canvas is in the box.
How can i do this?

Answer 1

You can place the canvas in a div whose width is less than the width of the canvas. Check out the following code:

 module Html = Dom_html let doc = Html.window##document let create_div () = let div = Html.createDiv doc in div##style##width <- Js.string "500px"; div##style##overflowX <- Js.string "scroll"; div let create_canvas () = let canvas = Dom_html.createCanvas document in canvas##width <- 900; canvas##height <- 900; canvas let start _ = let main = get_main () in let wrapper = create_div () in let canvas = create_canvas () in Dom.appendChild wrapper canvas; Dom.appendChild main wrapper; Js._false in Dom_html.window##onload <- Dom_html.handler start 

This code is a translation in js_of_ocaml of the following jsfiddle: https://jsfiddle.net/pre1wacc/