Draw a transparent rectangle for an online experiment

Hello everybody,

I want to draw as part of an experiment a transparent rectangle as a stimuli on the screen. When I run the experiment offline, everything works. But online the following error occurs: “ ReferenceError: None is not defined

I think the problem is the “None” in this part of my code:

Rectangle = new visual.Rect ({
win: psychoJS.window, name: ‘Rectangle’,
units: psychoJS.window.units,
width: [0.4, 0.2][0], height: [0.4, 0.2][1],
ori: 0, pos: [0, 0],
lineWidth: 1, lineColor: new util.Color([(- 1.0), (- 1.0), (- 1.0)]),
fillColor: new util.Color(None),
opacity: 1, depth: -1.0, interpolate: true,

Does anybody know a solution for this problem?

Thank you very much in advance!

Hi, did you add the code via “code component” in the builder view?

I just used the Builder and didnt add any code! For making the rectangle transparent, I defined the colour of the rectangle in the Builder View as “$None“.

I’m a bit confused. I think you don’t need to set a variable. Instead you can just set the “opactity” (in the “Basic” tag) to in the range from 0 to 0.5 to make a triangle transparent.

1 Like

Thank you very much, but I think I should describe my experiment in more detail: I try to develop an adapted version of the stroop task. I already set the opacity of the rectangles, because in some trials they should appear and sometimes not. But now I want to make the filling colour transparent and this does not work in the online version (offline it works pretty well!).
I am sorry for the confusion!

seems like some others also encountered similar issues. this is due to Python>JS translation and the solution is to replace “none” with “null” in your JS file.

btw it seems that later version has already fixed this issue

You could always set the fill color to the background color to appear transparent, and that way this color can be stated in the conditions file. Then, its just a question of changing the shape color on each trial.

Interesting though, that when you set the fill color to None the default is not the same as the background color, but displays a black fill. I think this needs posting on GitHub as an issue, so that the JavaScript behaviour matches the Python behaviour.

Hello everybody,
thanks for your help. I changed the “None” to “null” but now I encountered a different error:
TypeError: rgb is undefined

I modifed the following two files:


Thank you very much in advance!

If you use “None” as your color (not ‘$None’), then PsychoPy will convert it to undefined for you, and you will no longer have your error. Adding the extra dollar sign interferes with the conversion process, so needs to be fixed.


I used “None”

as my color and then this error occured… I am sorry if I misunderstand things, but I am quite new to PsychoPy.

No problem, sorry it may be the version you are using. Which version are you using?

You should really just try setting the fill color the same as the background. You will keep your outline, but the shape will look unfilled because the color is the same as the background. Try adding $[0,0,0] in place of None.

I could not set the fill color the same as the background, because the rectangles should be drawn around some words of the stroop task (to mark task switching). Anyway, I found a solution for my problem: I used a transparent image of an rectangle and now my experiment works.

Thank you very much for your fast support @dvbridges, @AlexeiLin

1 Like

Hi everyone,

I encountered the same problem, when i want to draw a transparent rectangle using Polygon by setting the fill color as None. The experiment offline, everything works. But online the following error occurs: “ ReferenceError: None is not defined ”. Is it possible to fix the problem except using a transparent image of a rectangle. How to set the fill color as None in Javascript of online experiment.

Thank you so much!

For people watching / coming across this page, there’s currently an open github issue for this and will hopefully be fixed in an upcoming release:

1 Like

Hi everyone, for people wanting to create transparent shapes for use on Pavlovia that have a non-transparent outline, I’ve found it’s really easy to do by creating a transparent shape in Powerpoint.

Draw your shape in Powerpoint with the border color/weight that you’d like. Then, right click the shape >> ‘Format shape’ >> ‘Fill’ to ‘Solid fill’ and slide the Transparency slider to 100%.
Then, right click the background >> ‘Format Background’ >> ‘Fill’ to ‘Solid fill’ and slide the Transparency slider to 100%.

Then save & right click your shape, and click ‘Save as Picture’, and make sure to save it as a .png file type. This will save the transparency aspect that will be treated as transparent in both psychopy and psycojs.

1 Like