Custom bitmap for 2d object

[glebk]

I am pretty new to phaser and js game development. And I need to construct game objects from the primitives, not load from image. 

So have two questions: 

1) How can I make like filled circle GameObject? Can't find examples how to do it in phaser 3, only in phaser 2. 
2) What I really need is a game object, where each pixel filled dynamically with its own colour. Imagine circle filled with "moving gradient" - like that. How can I achieve it? Is there any way to do it with enough performance? 

Would be really appreciate for answers. 
 

[samme]

• http://labs.phaser.io/index.html?dir=game objects/graphics/&q=
• http://labs.phaser.io/index.html?dir=textures/&q=

[glebk]

Thanks!

And the next problem.

Here is my code

//just add graphic 
var graphic=this.add.graphics();
graphic.fillStyle(0xff00ff,1);
graphic.fillRect(0,0,60,60);

//add sprite with graphic content

this.graphic2=this.make.graphics({x: 0, y: 0, add: false});
this.graphic2.fillStyle(0x2200ff,0.4);
this.graphic2.fillRect(0,0,60,60);
this.graphic2.generateTexture('graphic2',60,60);
        
var spr=this.add.sprite(0,0,'graphic2');

Here is the result:
https://gyazo.com/e6008d49e727084a856b0fc2316e8f10

Rectangles 1 and 2 should overlap completely in my opinion, but the second one is centered around the upper left corner instead of has the exact position of the 1st one. 

What am I doing wrong and how to fix it?