剪辑、save、restore的使用疑惑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas图片</title>
    <style>
        canvas {
            background-color: lightblue;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="800px" height="800px">您的浏览器不支持canvas
</canvas>
<script>
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext('2d');
    // context.save();
 var img = new Image();
    img.src = "http://img1.sycdn.imooc.com/climg//59a7df40000165fa06000600.jpg";
    //在此处补充代码
 context.arc(150, 150, 100, 0, Math.PI * 2, false);
    context.clip();
    context.fill();
    img.onload = function(){
        context.drawImage(img, 200, 20, 220, 200, 50, 50,200,200);
    };
    // context.restore();
 context.shadowOffsetX = 15;
    context.shadowOffsetY = 15;
    context.shadowBlur = 20;
    context.shadowColor = "red";
    context.fill();

</script>
</body>
</html>

老师您好，请看以上代码，我使用剪辑剪了一个图相关下来，效果如下

我想给这个圆形头像添加一个阴影来着，结果无效，我想着，应该是剪辑的原因只能在这个范围内绘制，然后我到了save() 和restore（）这两个方法，然后我在最前面保存了环境，我想在绘制阴影的时候恢复环境，然后绘制，结果一下子把剪辑的效果都给恢复了，我就在想了，那这个save 和restore有什么用呢，一招回到解放前，前面设置的样式统统失效

WittChen 2020-05-24

源自：HTML5 Canvas绘图基础 7-4 编程练习