请老师检查，代码怎么修改能避免输入框只输入空格导致绘制不出文字的情况？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>canvas案例</title>
    <style>
        .content{
            width: 1000px;
            height: 285px;
            margin: 100px auto;
        }
        .input-content{
            width: 300px;
            height: 248px;
            background-color: #a4a19a;
            padding-top: 37px;
            float: left;
        }
        .text{
            width: 255px;
            height: 23px;
            font-size: 10px;
            background-color: #fff;
            padding-left: 10px;
            border: none;
            border-radius: 12px;
            outline: none;
            margin: 0 18px 22px;
        }
        .submit{
            width: 84px;
            height: 23px;
            font-size: 10px;
            background-color: #232124;
            border-radius: 12px;
            border: none;
            outline: none;
            color: #fff;
            margin-left: 108px;
            cursor: pointer;
        }
        .canvas-content{
            width: 700px;
            height: 100%;
            background-color: #f0e9d6;
            float: left;
        }
        .card{
            margin: 75px 100px;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="input-content">
            <input type="text" class="text" placeholder="姓名" id="name" autocomplete="off" maxlength="6">
            <input type="text" class="text" placeholder="地址" id="adds" autocomplete="off" maxlength="10">
            <input type="text" class="text" placeholder="职业" id="work" autocomplete="off" maxlength="10">
            <input type="text" class="text" placeholder="口号" id="slogan" autocomplete="off"  maxlength="10">
            <button class="submit" id="subBtn">生成名片</button>
        </div>
        <div class="canvas-content">
            <canvas class="card" id="canvas" width="500px" height="76px">
                您的浏览器不支持canvas
            </canvas>
        </div>
    </div>
    <script>
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext('2d');
        var btn = document.getElementById('subBtn'),
            nameNode = document.getElementById('name'),
            addsNode = document.getElementById('adds'),
            workNode = document.getElementById('work'),
            sloganNode = document.getElementById('slogan');

        function draw() {
            var nameStr = nameNode.value || '请输入姓名',
                addsStr = addsNode.value || '请输入地址',
                workStr = workNode.value || '请输入职业',
                sloganStr = sloganNode.value || '请输入口号'; 

            //创建canvas渐变色背景
            var linearGradient = ctx.createLinearGradient(0,38,500,38);
            linearGradient.addColorStop(0,'#000');
            linearGradient.addColorStop(.6,'#000');
            linearGradient.addColorStop(1,'grey');
            ctx.fillStyle = linearGradient;
            ctx.fillRect(0,0,canvas.width,canvas.height);

            //设置图片
            var img = new Image();
            img.src = 'http://img1.sycdn.imooc.com/climg//59859f4d00014f1503000100.jpg';
            img.onload = function () {
                ctx.drawImage(img,20,11,80,81,0,0,78,78);
            }

            //设置文字
            ctx.fillStyle = '#fff';
            ctx.textAlign = 'left';
            ctx.textBaseline = 'top';

            ctx.save();
            ctx.font = 'bold 22px 微软雅黑';
            ctx.fillText(nameStr,93,10);
            ctx.restore();

            ctx.save();
            ctx.font = 'bold 14px 微软雅黑';
            ctx.fillText(addsStr,93,37);
            ctx.fillText(workStr,93,56);

            var nameStrWidth = ctx.measureText(nameStr).width,
                sloganPositionX = 245,
                sloganX = nameStrWidth + sloganPositionX;

            //移动中心点 设置旋转 设置旋转文字
            ctx.translate(sloganX,37);
            ctx.rotate(- Math.PI / 30);
            ctx.fillText(sloganStr,0,0);
            ctx.restore();
        }

        draw();

        //设置btn点击事件
        btn.onclick = function () {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            draw();
        };
    </script>
</body>
</html>

龍巛幽 2020-03-19

源自：HTML5 Canvas绘图基础 6-7 完成案例文字图片显示和变换