问题在代码注释里，求老师解答。

来源：3-11 编程练习

xxy流沙

2018-04-28 18:28:01

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        canvas{background-color:lightblue;}
    </style>
</head>
<body>
    <canvas id="canvas" width="800" height="800">
        您的浏览器不支持canvas
    </canvas>

    <script>
//在此处写出代码
     var canvas=document.getElementById("canvas");
     var ctx = canvas.getContext("2d");

     ctx.beginPath();
     ctx.moveTo(300,50);
     ctx.lineTo(350,150);
     ctx.lineWidth=10;//如何让这个线的粗细不在其他的路径起作用？
     ctx.strokeStyle="#ffc01c";
     ctx.stroke();

     ctx.closePath();

     ctx.beginPath();
     ctx.moveTo(400,150);
     ctx.lineTo(450,50);
     ctx.stroke();

     ctx.beginPath();//脸部
     /*ctx.fillStyle="#ffdab9";
     ctx.fillRect(300,150,150,100);*/
     //如果用路径的方法绘制，线宽就会影响它，如何让它不受影响呢？
     ctx.moveTo(300,150);
     ctx.lineTo(450,150);
     ctx.lineTo(450,250);
     ctx.lineTo(300,250);
     ctx.lineTo(300,150);
     ctx.stroke();
     ctx.fillStyle="#ffdab9";
     ctx.fill();

     ctx.beginPath();
     ctx.fillStyle="yellow";
     //strokeRect()不支持填充
     ctx.fillRect(280,170,20,40);//左耳
     ctx.fill();
     ctx.fillRect(450,170,20,40);//右耳
     ctx.fill();

     ctx.beginPath();
     ctx.arc(340,190,10,0,2*Math.PI,true);//左眼
     ctx.fillStyle="black";
     ctx.fill();
     ctx.stroke();

     ctx.beginPath();
     ctx.arc(410,190,10,0,2*Math.PI,true);//右眼
     ctx.fillStyle="black";
     ctx.fill();
     ctx.stroke();

     ctx.beginPath();
     ctx.fillStyle="red";
     ctx.fillRect(350,210,50,20);//嘴
     ctx.fill();

     //为什么要将填充色彩的这段代码放在前面，而放在后面，就会被前面的覆盖？
     ctx.beginPath();
     ctx.fillStyle="#ffb6c1";
     //ctx.fill();
     ctx.fillRect(320,250,110,160);//身体部分

     ctx.fillStyle="#20b2aa";
     //ctx.fill();
     ctx.fillRect(170,300,150,20);//左边手
     //ctx.fillStyle="#20b2aa";
     //ctx.fill();
     ctx.fillRect(430,300,150,20);//右边手


     ctx.fillRect(330,410,20,170);//绘制腿部
     ctx.fillRect(400,410,20,170);
   </script>
</body>

</html>