html5キャンバスの背景パターンを作成する方法

Question

私はchart.jsで作ったグラフを持っています...私のキャンバスの背景イメージを作っています...それについては何かを作っています... thisで見ることができますリンク...

Bu私はこの背景イメージを反応させることはできません（またはキャンバスの幅と高さに合わせる）...誰でも私を助けることができますか？それが応答イマイチ定義によるよう

var img = new Image(); 
img.src = 'http://www.360kreatif.com/ersen/efektler/images/light.png'; 
var canvas = document.getElementById("myChart"); 
var context = canvas.getContext('2d'); 
var fillPattern = context.createPattern(img, 'repeat'); 
context.fillStyle = fillPattern; 
context.fillRect(0, 0, 100, 100); 

var myChart = new Chart(canvas, { 
    type: 'pie', 
    data: { 
     labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
     datasets: [{ 
      label: '# of Votes', 
      data: [1, 1, 1, 1, 1, 1], 
      displacements: [2, 2, 2, 2, 2, 2], 
      backgroundColor: fillPattern, 
      borderColor: [ 
       'rgba(255,99,132,0)', 
       'rgba(54, 162, 235, 0)', 
       'rgba(255, 206, 86, 0)', 
       'rgba(75, 192, 192, 0)', 
       'rgba(153, 102, 255, 0)', 
       'rgba(255, 159, 64, 0)' 
      ], 
      borderWidth: 1, 
      cutoutPercentage:5 
      }] 
     }, 
     options: { 
      responsive: true, 
       legend: { 
        display: false, 
       }, 
       tooltips: { 
        enabled: false, 
       }, 
       title: { 
        display: false, 
       }, 
       animation: { 
        animateScale: true, 
        animateRotate: true 
       } 
     } 
    }); 

Answer 1

キャンバスタグは、ピクセルベースである - あなたが対応する画像が必要な場合は、（応答性）ベクターグラフィックスを使用してSVGタグを、使用してみてください。