SOURCE

        var mycanvas = document.createElement('canvas');
        mycanvas.id='xxb';
        mycanvas.width='300';
        mycanvas.height='400';
        document.body.appendChild(mycanvas);
        var bg = document.getElementById('xxb');
        /* 背景 */
        var background = bg.getContext('2d');
        background.beginPath();
        background.fillStyle = '#EEC9DA'
        background.fillRect(0, 0, 270, 290)
        var ctx = bg.getContext('2d');
        /* 左耳 */
        ctx.beginPath();
        ctx.lineWidth = 10;
        ctx.strokeStyle = '#945F33';

        ctx.arc(60, 69, 30, 0.5 * Math.PI, 2.25 * Math.PI, false);
        ctx.fillStyle = '#945F33';
        ctx.fill();
        ctx.stroke();
        /* 右耳 */
        ctx.beginPath();
        ctx.lineWidth = 10;
        ctx.strokeStyle = '#945F33';
        ctx.arc(210, 75, 30, 0.8 * Math.PI, 0.6 * Math.PI, false);
        ctx.fillStyle = '#945F33';
        ctx.fill();
        ctx.stroke();
        /* 脸 */
        var context = bg.getContext("2d");
        context.lineWidth = 10;
        context.strokeStyle = "#C9A06A";
        EvenCompEllipse(context, 130, 160, 100, 80); //椭圆
        context.fillStyle = '#C9A06A';
        context.fill();
        function EvenCompEllipse(context, x, y, a, b) {
            context.save();
            //选择a、b中的较大者作为arc方法的半径参数
            var r = (a > b) ? a : b;
            var ratioX = a / r; //横轴缩放比率
            var ratioY = b / r; //纵轴缩放比率
            context.scale(ratioX, ratioY); //进行缩放（均匀压缩）
            context.beginPath();
            //从椭圆的左端点开始逆时针绘制
            context.moveTo((x + a) / ratioX, y / ratioY);
            context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI);
            context.closePath();
            context.stroke();
            context.restore();
        };
        /* 下半脸 */
        var context1 = bg.getContext("2d");
        context1.lineWidth = 10;
        context1.strokeStyle = "#E4CAAF";

        EvenCompEllipse(context1, 130, 200, 60, 40); //椭圆
        context.fillStyle = '#E4CAAF';
        context.fill();
        function EvenCompEllipse(context1, x, y, a, b) {
            context1.save();
            //选择a、b中的较大者作为arc方法的半径参数
            var r = (a > b) ? a : b;
            var ratioX = a / r; //横轴缩放比率
            var ratioY = b / r; //纵轴缩放比率
            context1.scale(ratioX, ratioY); //进行缩放（均匀压缩）
            context1.beginPath();
            //从椭圆的左端点开始逆时针绘制
            context1.moveTo((x + a) / ratioX, y / ratioY);
            context1.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI);
            context1.closePath();
            context1.stroke();
            context1.restore();
        };
        /* 鼻子 */
        var context2 = bg.getContext("2d");
        context2.lineWidth = 10;
        context2.strokeStyle = '#945F33';
        EvenCompEllipse(context2, 130, 188, 10, 5); //椭圆
        context.fillStyle = '#945F33';
        context.fill();
        function EvenCompEllipse(context2, x, y, a, b) {
            context2.save();
            //选择a、b中的较大者作为arc方法的半径参数
            var r = (a > b) ? a : b;
            var ratioX = a / r; //横轴缩放比率
            var ratioY = b / r; //纵轴缩放比率
            context2.scale(ratioX, ratioY); //进行缩放（均匀压缩）
            context2.beginPath();
            //从椭圆的左端点开始逆时针绘制
            context2.moveTo((x + a) / ratioX, y / ratioY);
            context2.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI);
            context2.closePath();
            context2.stroke();
            context2.restore();
        };
        /* 丨 */
        var context3 = bg.getContext("2d");
        context3.lineWidth = 2;
        context3.strokeStyle = '#945F33';
        context3.moveTo(130, 195);
        context3.lineTo(130, 220);
        context3.stroke();
        /* 嘴 */
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#945F33';
        var grd = ctx.createLinearGradient(0, 0, 100, 0);//从左到右
        ctx.fillStyle = grd;

        ctx.arc(130, 200, 20, 0.2 * Math.PI, 0.8 * Math.PI, false);
        ctx.stroke();
        /* 左眼 */
        ctx.beginPath();
        ctx.lineWidth = 3;
        ctx.strokeStyle = 'black';
        var grd = ctx.createLinearGradient(0, 0, 100, 0);//从左到右
        ctx.fillStyle = grd;

        ctx.arc(85, 140, 10, 1 * Math.PI, 3 * Math.PI, false);
        ctx.fillStyle = 'black';
        ctx.fill();
        ctx.stroke();

        /* 右眼 */
        ctx.beginPath();
        ctx.lineWidth = 3;
        ctx.strokeStyle = 'black';
        ctx.arc(180, 140, 10, 1 * Math.PI, 3 * Math.PI, false);
        ctx.fillStyle = 'black';
        ctx.fill();
        ctx.stroke();