有没有办法在不旋转整个画布的情况下旋转画布的背景图像？看例子

Question

这是一个粗略的示例，但想在不旋转圆环图的情况下随着鼠标移动来移动针图像。或者有更好的方法来处理它吗？

html:

<canvas id="myChart" style="background:url('https://th.bing.com/th/id/R.2db409a16ede3960a7b29d352023f96b?rik=fmfST8altAgOzw&riu=http%3a%2f%2fwww.clker.com%2fcliparts%2fM%2fx%2fk%2f6%2fA%2fw%2fred-compass-needle-hi.png&ehk=lc9ZHlPQDSYqkD9apB6GLPDGgANmGVqnzx05ht2zekw%3d&risl=&pid=ImgRaw&r=0')no-repeat center; background-size:auto 30%; " height="100"></canvas>

剧本：

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ["Red", "Blue", "Yellow"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    tooltips: {
      callbacks: {
        title: function(tooltipItem, data) {
          return data['labels'][tooltipItem[0]['index']];
        },
        label: function(tooltipItem, data) {
          return data['datasets'][0]['data'][tooltipItem['index']];
        },
        afterLabel: function(tooltipItem, data) {
          var dataset = data['datasets'][0];
          var percent = Math.round((dataset['data'][tooltipItem['index']] / dataset["_meta"][0]['total']) * 100)
          return '(' + percent + '%)';
        }
      },
      backgroundColor: '#FFF',
      titleFontSize: 16,
      titleFontColor: '#0066ff',
      bodyFontColor: '#000',
      bodyFontSize: 14,
      displayColors: false
    }
  }
});
var img = $('#myChart');
if (img.length > 0) {
    var offset = img.offset();

    function mouse(evt) {
        var center_x = (offset.left) + (img.width() / 2);
        var center_y = (offset.top) + (img.height() / 2);
        var mouse_x = evt.pageX;
        var mouse_y = evt.pageY;
        var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
        var degree = (radians * (180 / Math.PI) * -1) + 90;
        img.css('-moz-transform', 'rotate(' + degree + 'deg)');
        img.css('-webkit-transform', 'rotate(' + degree + 'deg)');
        img.css('-o-transform', 'rotate(' + degree + 'deg)');
        img.css('-ms-transform', 'rotate(' + degree + 'deg)');
    }
    $(document).mousemove(mouse);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="myChart" style="background:url('https://th.bing.com/th/id/R.2db409a16ede3960a7b29d352023f96b?rik=fmfST8altAgOzw&riu=http%3a%2f%2fwww.clker.com%2fcliparts%2fM%2fx%2fk%2f6%2fA%2fw%2fred-compass-needle-hi.png&ehk=lc9ZHlPQDSYqkD9apB6GLPDGgANmGVqnzx05ht2zekw%3d&risl=&pid=ImgRaw&r=0')no-repeat center; background-size:auto 30%; " height="100"></canvas>

https://jsfiddle.net/wtzj4fhr/