Trying to make a small canvas 2D demo

1

Hi,
I made a small canvas 2D demo in the past in pure Javascript: Circle-Junction.

I’m trying to rewrite it in ReScript: circle-junction-re but it does not work.

I realise that it’s quite long for a post / a question, but maybe someone will accept to have a look. Maybe the error is a simple beginner error that is easy to find.

I’m a beginner, so I would also be happy with comments on the code.

1 Like
2

Hi @fccm

The @send decorator is used to bind to a method on an object or array.

The @get decorator is used to bind to a property of an object.

I changed

@send external width: Dom.element => int = "width"
@send external height: Dom.element => int = "height"

to

@get external width: Dom.element => int = "width"
@get external height: Dom.element => int = "height"

and everything worked.

Syntax-lookup would be helpful to get a brief idea about the decorators.

1 Like
3

Thanks!
I fixed this error, but there is probably another error, because it still doesn’t work.
I should get this.
But nothing displays in the canvas.
(I tested in both Firefox on Linux, and Chrome on a Chrome-Book)
In the console of Firefox the error reported is:

Uncaught ReferenceError: require is not defined
    <anonymous> file:///tmp/circle-junction.bs.js:4

At line 4 there is:

var Js_math = require("./bs-platform/lib/js/js_math.js");

I added ./ before bs-platform to set a local path.
The directory ./bs-platform/lib/js/ does contain all the dependencies, so I don’t know what’s wrong.

4

Found this:
https://sebhastian.com/javascript-require-is-not-defined/

5

Hi, I have added esbuild to bundle the js files. I have also added some instructions in ReadMe to run locally.

Demo : https://a-c-sreedhar-reddy.github.io/circle-junction-re/