# How to create a filled circle in javascript
**URL:** https://discourse.psychopy.org/t/how-to-create-a-filled-circle-in-javascript/13394
**Category:** Online experiments
**Created:** [May 15, 2020, 6:41pm UTC](https://discourse.psychopy.org/t/how-to-create-a-filled-circle-in-javascript/13394 "2020-05-15T18:41:09Z")
**Posts on this page:** 18
**Page:** 1
### Author:  [@Mauro83](https://discourse.psychopy.org/u/Mauro83)
#### Post date: [May 15, 2020, 6:41pm UTC](https://discourse.psychopy.org/t/how-to-create-a-filled-circle-in-javascript/13394/1 "2020-05-15T18:41:09Z")
Hello,
I am trying to create a fixation dot for my experiment.
I tried to use Polygon on the Interface, but I just found out it cannot create circles.
Is there another way to create it in the interface?
What is the alternative way in Javascript?
Can I do it while keeping the units as “Height”?
Thanks
Mauro
---
### Author:  [@dvbridges](https://discourse.psychopy.org/u/dvbridges)
#### Post date: [May 15, 2020, 7:34pm UTC](https://discourse.psychopy.org/t/how-to-create-a-filled-circle-in-javascript/13394/2 "2020-05-15T19:34:01Z")
Hi @Mauro83, circles are possible online using the polygon stim. Set your shape as a regular polygon with 99 vertices.
---
### Author:  [@Mauro83](https://discourse.psychopy.org/u/Mauro83)
#### Post date: [May 15, 2020, 7:39pm UTC](https://discourse.psychopy.org/t/how-to-create-a-filled-circle-in-javascript/13394/3 "2020-05-15T19:39:22Z")
Hello,
I tried with this Polygon but I still get a rectangle instead
---
### Author:  [@wakecarter](https://discourse.psychopy.org/u/wakecarter)
#### Post date: [May 15, 2020, 7:55pm UTC](https://discourse.psychopy.org/t/how-to-create-a-filled-circle-in-javascript/13394/4 "2020-05-15T19:55:42Z")
Hi,
I’ve created circles using Shapestim and Polygon but not Circle.
e.g.
```auto
target = visual.Polygon(
win=win,
name="target",
fillColor=yellow,
lineColor=white,
edges=36,
pos = [0,voffset],
size=scale*dtarget
)
```
> **[PsychoPy Python to Javascript crib sheet](https://docs.google.com/document/d/13jp0QAqQeFlYSjeZS0fDInvgaDzBXjGQNe4VNKbbNHQ/edit?usp=sharing)**
>
> PsychoPy version 2020.1.3Python to Javascript Crib Sheet Compiled by Wakefield Morys-Carter, Oxford Brookes Universityhttps://twitter.com/psych\_stats PsychoPy 2020 has an automatic Python to Javascript translation tool. This document contains...
---
### Author:  [@dvbridges](https://discourse.psychopy.org/u/dvbridges)
#### Post date: [May 15, 2020, 8:05pm UTC](https://discourse.psychopy.org/t/how-to-create-a-filled-circle-in-javascript/13394/5 "2020-05-15T20:05:06Z")
@Mauro83, what version of PsychoPy are you using?
---
### Author:  [@Mauro83](https://discourse.psychopy.org/u/Mauro83)
#### Post date: [May 15, 2020, 8:05pm UTC](https://discourse.psychopy.org/t/how-to-create-a-filled-circle-in-javascript/13394/6 "2020-05-15T20:05:50Z")
PsychoPy v2020.1.2
---
### Author:  [@dvbridges](https://discourse.psychopy.org/u/dvbridges)
#### Post date: [May 15, 2020, 8:08pm UTC](https://discourse.psychopy.org/t/how-to-create-a-filled-circle-in-javascript/13394/7 "2020-05-15T20:08:55Z")
This should work, perhaps try refreshing your browser cache.
Example of working circle: [https://run.pavlovia.org/dvbridges/test\_mousemove/html/](https://run.pavlovia.org/dvbridges/test_mousemove/html/)
---
### Author:  [@wakecarter](https://discourse.psychopy.org/u/wakecarter)
#### Post date: [May 15, 2020, 8:15pm UTC](https://discourse.psychopy.org/t/how-to-create-a-filled-circle-in-javascript/13394/8 "2020-05-15T20:15:35Z")
36 sides should be plenty
---
### Author:  [@dvbridges](https://discourse.psychopy.org/u/dvbridges)
#### Post date: [May 15, 2020, 8:23pm UTC](https://discourse.psychopy.org/t/how-to-create-a-filled-circle-in-javascript/13394/9 "2020-05-15T20:23:35Z")
@wakecarter, I find that the smaller number of vertices is not scalable to larger circles, you end up with flat edges on a circle, thats why I recommend to use 99 vertices in PsychoPy .
---
### Author:  [@Mauro83](https://discourse.psychopy.org/u/Mauro83)
#### Post date: [May 15, 2020, 8:25pm UTC](https://discourse.psychopy.org/t/how-to-create-a-filled-circle-in-javascript/13394/10 "2020-05-15T20:25:10Z")
Could you please spell it out a bit more? There are a lot of unknown variables (win, yellow, scale, etc.) and I did not manage to implement it
---
### Author:  [@dvbridges](https://discourse.psychopy.org/u/dvbridges)
#### Post date: [May 15, 2020, 8:26pm UTC](https://discourse.psychopy.org/t/how-to-create-a-filled-circle-in-javascript/13394/11 "2020-05-15T20:26:40Z")
Here is some code used for the circle in the example:
```auto
polygon_2 = new visual.Polygon ({
win: psychoJS.window,
name: 'polygon_2', units : 'height',
edges: 99,
size:[0.25, 0.25],
ori: 0,
pos: [0, 0],
lineWidth: 1,
lineColor: new util.Color([1, 1, 1]),
fillColor: new util.Color([1, 1, 1]),
opacity: 1, depth: -1, interpolate: true,
});
```
---
### Author:  [@Mauro83](https://discourse.psychopy.org/u/Mauro83)
#### Post date: [May 15, 2020, 8:33pm UTC](https://discourse.psychopy.org/t/how-to-create-a-filled-circle-in-javascript/13394/12 "2020-05-15T20:33:17Z")
Thanks!
But is says:
- **TypeError: visual.Polygon is not a constructor**
---
### Author:  [@dvbridges](https://discourse.psychopy.org/u/dvbridges)
#### Post date: [May 15, 2020, 8:38pm UTC](https://discourse.psychopy.org/t/how-to-create-a-filled-circle-in-javascript/13394/13 "2020-05-15T20:38:34Z")
@Mauro83, would you mind sharing the URL for your project?
---
### Author:  [@Mauro83](https://discourse.psychopy.org/u/Mauro83)
#### Post date: [May 15, 2020, 8:42pm UTC](https://discourse.psychopy.org/t/how-to-create-a-filled-circle-in-javascript/13394/14 "2020-05-15T20:42:59Z")
Sure, [https://run.pavlovia.org/mauro83/karin2/html/](https://run.pavlovia.org/mauro83/karin2/html/)
---
### Author:  [@dvbridges](https://discourse.psychopy.org/u/dvbridges)
#### Post date: [May 15, 2020, 8:47pm UTC](https://discourse.psychopy.org/t/how-to-create-a-filled-circle-in-javascript/13394/15 "2020-05-15T20:47:31Z")
Thanks @Mauro83. The code is set to use PsychoJS version 3.0.6, so if you have PsychoPy 2020.1.2, then you need to set the version of PsychoPy in the Experiment Settings dialog, either use blank, latest, or set the version to 2020.1.2/3 or some other latest version. After you have recompiled/resynced the code with the new version, you should be able to just use Builder to create your circle, as with the original suggestion.
---
### Author:  [@Mauro83](https://discourse.psychopy.org/u/Mauro83)
#### Post date: [May 15, 2020, 8:56pm UTC](https://discourse.psychopy.org/t/how-to-create-a-filled-circle-in-javascript/13394/16 "2020-05-15T20:56:46Z")
It works! Thank you SO much!
---
### Author:  [@wakecarter](https://discourse.psychopy.org/u/wakecarter)
#### Post date: [May 15, 2020, 8:57pm UTC](https://discourse.psychopy.org/t/how-to-create-a-filled-circle-in-javascript/13394/17 "2020-05-15T20:57:21Z")
win, and the colours are on my crib sheet.
scale is a constant to change the size of the circle (and other objects on the same screen)
---
### Author:  [@Mauro83](https://discourse.psychopy.org/u/Mauro83)
#### Post date: [May 15, 2020, 9:06pm UTC](https://discourse.psychopy.org/t/how-to-create-a-filled-circle-in-javascript/13394/18 "2020-05-15T21:06:20Z")
That crib sheet is a life saver!! Thanks 😉