Изображения выглядят размытыми, когда я использовал canvasPattern в качестве pointBackgroundColor

Question

Ожидаемое поведение

Изображения должны хорошо выглядеть без размытия на всех разрешениях экрана.Это выглядит хорошо в разрешении ПК.

Текущее поведение

Изображения выглядят размытыми на мобильных разрешениях.

Вот мой код

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>

<canvas id="myChart"></canvas>

JS

var img = new Image();
img.src = "https://techvalor.net/images/avatars/generator/175_1536055288.png";

img.onload = function() {
var canvas = document.getElementById("myChart");

var tempCanvas = document.createElement("canvas");
var tCtx = tempCanvas.getContext("2d");

var size = 40;

tempCanvas.width = size;
tempCanvas.height = size;

tCtx.drawImage(img, 0, 0, img.width, img.height, -size / 2, -size / 2, size, size);         
tCtx.drawImage(img, 0, 0, img.width, img.height, size / 2, -size / 2, size, size); 
tCtx.drawImage(img, 0, 0, img.width, img.height, -size / 2, size / 2, size, size);         
tCtx.drawImage(img, 0, 0, img.width, img.height, size / 2, size / 2, size, size);

var ctx = canvas.getContext("2d");
var fillStyle = ctx.createPattern(tempCanvas, "repeat");

var chart = new Chart(ctx, {
  type: "line",
  data: {
    labels: ["Item 1", "Item 2", "Item 3", "Item 4"],
    datasets: [
      {
        data: [5, 20, 35, 45],
        pointBackgroundColor: fillStyle,
        pointRadius: 20,
        pointBorderColor: "rgb(0,0,0)"
      }
    ]
  },
  options: {
    hover: { mode: null },
    tooltips: { enabled: false }
  }
 });
};

Codepen

https://codepen.io/rajkumar-osm/full/ZPbOOe

Я думаю, что это как-то связано с devicePixelRatio , но я понятия не имею, как это учитывать при рисовании изображения на холсте.