Adjust Documentation on Graphics API page

[intrepidOlivia]

Hello, I think there is some improvement to be made on the Graphics page of the docs: https://createjs.com/docs/easeljs/classes/Graphics.html

The information here is disconnected in a way that leads to an easy misunderstanding. The example code here:

var g = new createjs.Graphics();
 g.setStrokeStyle(1);
 g.beginStroke("#000000");
 g.beginFill("red");
 g.drawCircle(0,0,30);

shows how to create a new Graphics instance, but this Graphics object is completely standalone - there's no subsequent information on how to include it on a new or existing stage. What is subsequent is a reference to a myGraphics object, but there is no description of where myGraphics is meant to come from. The implication then is that myGraphics is created using the constructor above (new createjs.Graphics()), but as a standalone object it doesn't actually appear on the stage when the example code is reproduced by a newbie such as myself.

I think the narrative of information on this page would be improved if a couple more descriptive examples were added in order to complete the sequence of information.

The first example could optionally include one additional line:

var g = new createjs.Graphics();
 g.setStrokeStyle(1);
 g.beginStroke("#000000");
 g.beginFill("red");
 g.drawCircle(0,0,30);
g.draw(context);

But I think more importantly, a simple example next of where the myGraphics variable might come from would help clarify the use of that variable:

const s = new createjs.Shape();
stage.addChild(s);

const myGraphics = s.graphics;
myGraphics.beginStroke("red").beginFill("blue").drawRect(20, 20, 100, 50);

Any subsequent references to myGraphics after this point would be assumed to refer to a similarly obtained graphics object.

[lannymcnie]

Great suggestion, thanks! I will make some updates.