fillStyle = ‘color’ 填充背景色
    如何填充背景图片， 需要使用纹理（**createPattern（））来填充图片，注意如果使用纹理填充背景图片会默认从坐标系原点的位置开始填充，当为repeat的时候你所规定的区域会有图片显示，但是由于是从原点的位置开始渲染的所以背景图为重复且显示位置不对，当为no-repeat**的图片的显示区域为原点才会看到图片，且还要注意，图片的时异步请求过来的，可能图片还没请求过来，你就开始渲染会不显示图片
    代码如下

    1.     <canvas id="canvas" width="500" height="500" style="width: 500px; height: 500px; border: 1ex solid black;"></canvas>
    2.     <script>
    3.         var canvas = document.getElementById('canvas');
    4.         var ctx = canvas.getContext('2d');
    5.         var img = new Image();
    6.         img.src = './1.jpg';
    7.         // 在其图片异步请求成功后渲染图片
    8.         img.onload = function(){
    9.             ctx.beginPath();
    10.             ctx.translate(100,100); // 平移坐标轴使其在其正确的位置显示图片
    11.             var bg = ctx.createPattern(img , 'no-repeat'); // 使用纹理来填充图片
    12.             ctx.fillStyle = bg;
    13.             ctx.fillRect(0,0,200,100);
    14.         }
    15.     </script>

    效果图
    image.png