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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

<!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>