How to use the tabris.device.scaleFactor function in tabris

function drawGraph({target: canvas, width, height}) {
  const scaleFactor = device.scaleFactor;
  const ctx = canvas.getContext('2d', width * scaleFactor, height * scaleFactor);
  // scale canvas to be pixel exact
  ctx.scale(scaleFactor, scaleFactor);
  graph.draw(ctx, width, height);
}

public draw() {
    let width = this.bounds.width * device.scaleFactor;
    let height = this.bounds.height * device.scaleFactor;
    let ctx = this.getContext('2d', width, height);
    this.drawBackground(ctx);
    this.drawTemperatureScale(ctx);
    this.drawTimeScale(ctx);
    this.drawTemperatureCurve(ctx);
  }

function draw({target: canvas, width, height}) {
  const scaleFactor = device.scaleFactor;
  const ctx = canvas.getContext('2d', width * scaleFactor, height * scaleFactor);
  ctx.scale(scaleFactor, scaleFactor);
  ctx.strokeStyle = 'rgb(78, 154, 217)';
  ctx.lineWidth = 10;
  ctx.moveTo(20, 20);
  ctx.lineTo(width - 40, height - 40);
  ctx.stroke();
  ctx.putImageData(createImageData(80, 40), 100, 100);
  const data = ctx.getImageData(0, 0, 100, 100);
  ctx.putImageData(data, 180, 100);
}

autoDispose: false
});

const canvas = new Canvas({
  centerX: 0, top: 32, width: CANVAS_WIDTH, height: CANVAS_HEIGHT
}).appendTo(page);

new CheckBox({
  centerX: 0, top: [canvas, 16],
  text: 'Counterclockwise'
}).on('checkedChanged', ({value}) => {
  clearCanvas();
  drawArcs(value);
}).appendTo(page);

const scaleFactor = device.scaleFactor;
const context = canvas.getContext('2d', CANVAS_WIDTH * scaleFactor, CANVAS_HEIGHT * scaleFactor);
context.scale(scaleFactor, scaleFactor);
context.textAlign = 'center';
context.textBaseline = 'top';

clearCanvas();
drawArcs(false);

function drawArcs(counterClockwise) {
  drawArc(10, 10, 0.25, 1.5, counterClockwise);
  drawArc(80, 10, 1, 0.5, counterClockwise);
  drawArc(160, 10, -0.5, 0.5, counterClockwise);

  drawArc(10, 80, 0.5, -0.5, counterClockwise);
  drawArc(80, 80, -1, -0.5, counterClockwise);
  drawArc(160, 80, -0.5, 1, counterClockwise);

}).on('resize', ({target, width, height}) => {
  const scaleFactor = device.scaleFactor;
  const ctx = target.getContext('2d', width * scaleFactor, height * scaleFactor);
  ctx.scale(scaleFactor, scaleFactor);
  animationExample.draw(ctx, width, height);
}).appendTo(page);

.onResize(({target: canvas, width, height}) => {
      const scaleFactor = device.scaleFactor;
      const ctx = canvas.getContext('2d', width * scaleFactor, height * scaleFactor);
      ctx.textAlign = 'center';
      ctx.fillStyle = '#db4437aa';
      ctx.fillRect(60, 0, 264, 190);
      ctx.fillStyle = '#4356ccaa';
      ctx.fillRect(0, 120, 264, 180);
      ctx.fillStyle = '#8dbd0090';
      ctx.beginPath();
      ctx.arc(260, 192, 140, 0, 2 * Math.PI, false);
      ctx.fill();
      ctx.fillStyle = 'white';
      ctx.font = ctx.font = '30px';
      ctx.fillText('Canvas', 64, 280);
    }).appendTo(parent);
}

_createCanvasContext() {
    const canvas = this.find(Canvas).first();
    const scaleFactor = device.scaleFactor;
    const bounds = canvas.bounds;
    const width = bounds.width * scaleFactor;
    const height = bounds.height * scaleFactor;
    return canvas.getContext('2d', width, height);
  }

public draw() {
    let width = this.bounds.width * device.scaleFactor;
    let height = this.bounds.height * device.scaleFactor;
    let ctx = this.getContext('2d', width, height);
    this.drawBackground(ctx);
    this.drawTemperatureScale(ctx);
    this.drawTimeScale(ctx);
    this.drawTemperatureCurve(ctx);
  }

function drawTexts({target: canvas, width, height}) {
  const scaleFactor = device.scaleFactor;
  const ctx = canvas.getContext('2d', width * scaleFactor, height * scaleFactor);
  ctx.scale(scaleFactor, scaleFactor);
  ctx.font = '14px';
  ctx.strokeStyle = 'red';

  let x = 50;
  let y = 50;

  ctx.moveTo(5, y);
  ctx.lineTo(295, y);
  ctx.stroke();
  ctx.textAlign = 'center';
  ['top', 'bottom', 'middle'].forEach((mode) => {
    ctx.textBaseline = mode;
    ctx.fillText(mode, x, y);
    x += 100;