How does fillStyle work in bs-webapi Canvas2d

Question

I'm wondering how to create a and set a fill style using bs-webapi and Canvas2d interface in ReasonML.

I think the definition I might need is this:

let fillStyle = (ctx: t) =>
  ctx |> fillStyle |> reifyStyle;

But I'm having trouble understanding it.

I have previously used this project as a source of examples, but I think the bs-webapi has changed since that project was authored. At least the following line modeled after the example:

Canvas2d.fillStyle(ctx, "rgba(0,255,255,255)");

gives me this error:

Error: This function has type
         Webapi.Canvas.Canvas2d.t => (Webapi.Canvas.Canvas2d.style('a), 'a)
       It is applied to too many arguments; maybe you forgot a `;'.

Answer 1

The function you want is setFillStyle:

Canvas2d.setFillStyle(ctx, String, "rgba(0,255,255,255)");

This was renamed from fillStyle long ago, because there was no getter back then and the convention is to name the getter fillStyle and the setter setFillStyle. At the same time it was made to support gradients and pattern.

The way setFillStyle now works is that the second argument determines the type of the third. If you pass String as the second argument, the third is required to be a string. If you pass Gradient it needs to be a gradient, which you can get from createLinearGradient or createRadialGradient. And lastly you can pass Pattern, which requires the third argument be a pattern obtained from createPattern.

In general, you should refer to the Canvas2d test file for usage examples.