06-01_resizeShapeEachOther

When dealing with shapes within shapes, such as Winston's face, scale each shape's size with the first shape. Also, incorporate the canvas size to make ALL the shapes responsive to the size of the window.

I've implemented a click and drag function, to grab winston and change his co-ordinates. x and y will change based on the position of the mouse.


        
 let x = canvas.width * .1
        
 let y = canvas.height * .5
        
 let faceSize = ;

 function moveShape(e){
  let bound = canvas.getBoundingClientRect();
  x = e.clientX ;
  y = e.clientY ;
  position.x = 396 ;
  position.y = 129;
 
 };
  canvas.addEventListener('mousedown',() => {
  canvas.addEventListener('mousemove',moveShape)
 });
 canvas.addEventListener('mouseup',() => {
  canvas.removeEventListener('mousemove',moveShape)
 });
x = 396 y = 129

x = 0 y = 0


function drawWinston(x,y,faceSize ){

  c.beginPath();

  c.fillStyle = "yellow",

  c.ellipse(x,y,faceSize, faceSize, Math.PI / 4, 0 , 2 * Math.PI )

  c.fill()

  c.stroke()

  c.closePath()

  // Eyes 

 c.beginPath()

  // Left Eye

  c.fillStyle = "white";

  c.ellipse( x - (faceSize * .3 ), 

   y - (faceSize * .2 ),

   faceSize * .2,

   faceSize * .2 ,

   Math.PI / 4,

   0,

   2 * Math.PI )

  c.fill();

  c.stroke()

  c.closePath()

                .. etc Right Eye ... Mouth


                function animate(){
                    
  window.requestAnimationFrame(animate)
                      c.clearRect(0,0,canvas.width,canvas.height)
                    
  drawWinston(x,y,faceSize);
                    
 }
                    animate()