JS code component: Rect Stimuli border line and color do not show properly online

Online experiments
1

URL of experiment:

Description of the problem: I am trying to have a yellow-bordered box around my text stimuli (as below) by using a code component.
image
The code component was firstly auto-translated in PsychoPy builder and then set to Both to edit based on the JS’s bugs. On my local mac laptop, the python code works fine. The picture is a screenshot of my local experiment. When running it online, the JS code shows no error but couldn’t show the border line of the rectangle with this line of code.

box_stimulus = new visual.Rect({"win": psychoJS.window, "name": "box_stimulus", "width": 0.12, "height": 0.028, "ori": 0.0, "pos": current_pos, "anchor": "center", "lineWidth": 5, "colorSpace": "rgb", "lineColor": "yellow", "fillColor": "black", "opacity": 1, "depth": (- 1.0), "interpolate": true});

Since the black-filled box cannot be seen on a black background. I tested this code by using another visible fillColor. The box stimuli are created and can be seen if using “fillColor”: “yellow”. I can see my boxes showing up in the proper positions but still without the line/border.

By the way, by changing the lineWidth to a bigger number (e.g., 20), I can see the border line might overlap my image and the rectangle’s inner region (like below).
image

Does anyone know how I can set the lineWidth and lineColor in JS code to see it as a thin-line in yellow?

If anyone has experienced this problem and knows how I should solve this, please let me know. Thanks!

2

It seems to be due to the color-defining problem in PsychoJS. LineWidth should be the same value as in the python code. Here is my solution:

yellow = new util.Color([1, 1, 0]);

box_stimulus = new visual.Rect({"win": psychoJS.window, "name": "box_stimulus", "width": 0.12, "height": 0.028, "ori": 0.0, "pos": current_pos, 
"anchor": "center", "lineWidth": 1.6, "colorSpace": "rgb", "lineColor": yellow, "fillColor": null, "opacity": 1, 
"depth": (- 1.0), "interpolate": true});