| Reference | Downloads | Github

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.


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