make your own jigglypuff

function wb2_pg3_ex2() {
    // use type information to make TypeScript happy
    /** @type {HTMLCanvasElement} */
    let canvas = (/** @type {HTMLCanvasElement} */ document.getElementById("canvas2"));

    // the student should fill in the rest...
    let context = canvas.getContext('2d');


    context.fillStyle = "pink";
    context.strokeStyle = "black";
    //context.lineWidth = 5;

    context.lineWidth = 6
    context.beginPath();
    context.lineTo(250, 175)
    context.lineTo(400, 150)
    context.lineTo(325, 250)
    context.stroke();
    context.fill();
    context.closePath();

    context.beginPath();
    context.lineTo(250, 175)
    context.lineTo(100, 150)
    context.lineTo(175, 250)
    context.stroke();
    context.fill();
    context.closePath();

    context.fillStyle = "pink"


    context.lineWidth = 3
    context.beginPath()
    context.lineTo(250,340);
    context.lineTo(130, 340);
    ///////////context.lineTo(375, 340);
    //context.arc(375, 340, 55, Math.PI*1.5, Math.PI*0.5);
    //context.lineTo(250, 340);
    //context.arc(125, 340, 55, Math.PI*0.5, Math.PI*1.5);
    context.arc(160,340,40,Math.PI*1, Math.PI*2)
    context.fill();
    context.stroke();
    context.closePath();


    context.beginPath()
    context.lineTo(250,340);
    context.lineTo(380, 340);
    ///////////context.lineTo(375, 340);
    //context.arc(375, 340, 55, Math.PI*1.5, Math.PI*0.5);
    //context.lineTo(250, 340);
    //context.arc(125, 340, 55, Math.PI*0.5, Math.PI*1.5);
    context.arc(340,340,40,Math.PI*1, Math.PI*2)
    context.fill();
    context.stroke();
    context.closePath();



   context.lineWidth = 3
    context.beginPath();
    context.arc(250, 250, 100, 0, Math.PI * 2);
    context.fill();
    context.stroke();
    context.closePath();


    context.beginPath()
    context.fillStyle = "pink"
    context.lineTo(250, 175)
    context.lineTo(100, 150)
    context.lineTo(175, 250)
    //context.stroke();
    context.fill();
    context.closePath();

    context.beginPath();
    context.lineTo(250, 175)
    context.lineTo(400, 150)
    context.lineTo(325, 250)
    //context.stroke();
    context.fill();
    context.closePath();



    context.fillStyle = "brown"
    context.beginPath()
    context.lineTo(170, 175)
    context.lineTo(125, 160)
    context.lineTo(150, 200)
    context.lineTo(170, 175)
    //context.stroke();
    context.fill();
    context.closePath();

    context.beginPath
    context.lineTo(330, 175)
    context.lineTo(375, 160)
    context.lineTo(350, 200)
    context.lineTo(330, 175)
    //context.stroke();
    context.fill();
    context.closePath();

    context.fillStyle = "pink";

    context.beginPath()
    context.lineTo(125, 235);
    context.lineTo(375, 235);
    context.arc(375, 250, 15, Math.PI*1.5, Math.PI*0.5);
    context.lineTo(250, 265);
    context.arc(125, 250, 15, Math.PI*0.5, Math.PI*1.5);
    context.fill();
    context.stroke();
    context.closePath();

    //context.rect()
    context.beginPath()
    context.fillRect(175,170,150,100)
    context.closePath()

    context.beginPath()
    let radius = 0;
    let angle = 0;
    for (var n = 0; n < 150; n++) {
        radius += 0.5;
        angle += (Math.PI * 2) / 50;
        var x = canvas.width / 2 + radius * Math.cos(angle);
        var y = canvas.height / 3 + radius * Math.sin(angle);
        context.lineTo(x, y);
    }
    context.stroke()
    context.fill()
    context.closePath()

    context.beginPath()
    radius = 0;
    angle = 0;
    for (var n = 0; n < 150; n++) {
        radius += 0.50;
        angle += (Math.PI * 2) / 50;
        var x = canvas.width / 2 + radius * Math.cos(angle);
        var y = canvas.height / 3 + radius * Math.sin(angle);
        context.lineTo(x, y);
    }
    context.stroke();
    //context.fill()
    context.closePath();


    //context.fillStyle = "red";
    context.beginPath();
    context.arc(250,290,20,Math.PI*1, Math.PI*2, true)
    context.stroke();
    //context.fill()
    context.closePath();

    context.fillStyle = "white";
    context.beginPath()
    context.arc(210, 250, 30, 0, Math.PI * 2);
    context.stroke();
    context.fill();
    context.closePath()

    context.fillStyle = "white";
    context.beginPath()
    context.arc(290, 250, 30, 0, Math.PI * 2);
    context.stroke();
    context.fill();
    context.closePath()

    context.fillStyle =   `rgba(0,170,255,${(2)/4.0}`;
    context.beginPath()
    context.arc(290, 250, 20, 0, Math.PI * 2);
    //context.stroke();
    context.fill();
    context.closePath()


    //for(let x=0; x<4; x++) {
      //  context.strokeStyle = `rgba(80,0,0,     ${(x+1)/4.0})`;
        //context.fillStyle =   `rgba(255,170,170,${(x+1)/4.0}`;
        //context.fillRect(40+x*50,30,30,180);
        //context.strokeRect(40+x*50,30,30,180);
    //}

    context.beginPath()
    context.arc(210, 250, 20, 0, Math.PI * 2);
    //context.stroke();
    context.fill();
    context.closePath()


    // make some things to cover over

    /*
    context33.lineWidth = 3;
    context33.strokeStyle = "black";
    context33.fillStyle = "darkgray";
    context33.fillRect(20,40,220,20);
    context33.strokeRect(20,40,220,20);

    context33.strokeStyle = "darkred";
    context33.fillStyle = "lightpink";
    context33.fillRect(20,80,220,20);
    context33.strokeRect(20,80,220,20);

    context33.strokeStyle = "darkblue";
    context33.fillStyle = "lightblue";
    context33.fillRect(20,120,220,20);
    context33.strokeRect(20,120,220,20);

    context33.strokeStyle = "darkgreen";
    context33.fillStyle = "lightgreen";
    context33.fillRect(20,160,220,20);
    context33.strokeRect(20,160,220,20);

    for(let x=0; x<4; x++) {
        context33.strokeStyle = `rgba(80,0,0,     ${(x+1)/4.0})`;
        context33.fillStyle =   `rgba(255,170,170,${(x+1)/4.0}`;
        context33.fillRect(40+x*50,30,30,180);
        context33.strokeRect(40+x*50,30,30,180);
    }
    */
}