03-01_moreVariables


                function drawWinston( ,y){
                
 let faceWidth = 125;
                
 let eyeWidth = 25;
                
 let eyeX = x - 40;
                
 let eyeY = y - 25;
                
 c.beginPath();
                
 c.fillStyle = "yellow"
                
 // Face
                
 c.ellipse( x, y, faceWidth, faceWidth, Math.PI / 4, 0 , 2 * Math.PI)
                
 c.fill();
                
 c.closePath();
                
 // Eyes
                
 c.beginPath();
                
 c.fillStyle = "whitesmoke"
                
 c.ellipse(eyeX, eyeY, eyeWidth, eyeWidth, Math.PI / 4, 0 , 2 * Math.PI )
                
 c.fill();
                
 c.stroke()
                
 c.closePath();
                
 c.beginPath();
                
 c.fillStyle = "whitesmoke"
                
 c.ellipse(eyeX + 120, eyeY, eyeWidth, eyeWidth, Math.PI / 4, 0 , 2 * Math.PI )
                
 c.fill();
                
 c.stroke()
                
 c.closePath();
                

                // Mouth
                
 c.beginPath();
                
 c.fillStyle = "coral"
                
 c.ellipse(x  , y + 70, eyeWidth, eyeWidth + 10, Math.PI / 4, 0 , 2 * Math.PI )
                
 c.fill();
                
 c.stroke()
                
 c.closePath();
                }

We can move ALL of shapes based on an anchor position. If we assign a variable to winston's x co-ordinate, we can base the rest of the shapes of that variable.

check the code, when I add a value to x for the mouth, the mouth dissapears if I change x