canvas画布上的文字随窗口大小变形

问题：使用canvas的时候，画布上的文字 会随着浏览器大小而改变被挤压变形

原因：canvas标签设置了如下样式：

<div class="content">
   <canvas id="canvasId"></canvas>
</div>

<style>
   /*---------就是这个样式导致的，得去掉----------*/
    #canvasId{
        width:100%;
        height:100%;
    }
    .content{
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
    }
</style>