getPixelRatio

Get the resolution ratio of Canvas context for handling high DPI screens.

API

getPixelRatio

Return

Argument	Description	Type
`number`	Pixel ratio	`number`

Parameters

Parameter	Description	Type	Default
`context`	Canvas 2D rendering context	`CanvasRenderingContext2D`	Required

Example

Basic Usage

import { getPixelRatio } from 'ranuts';

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const ratio = getPixelRatio(ctx);
console.log('Pixel ratio:', ratio);

High DPI Screen Adaptation

import { getPixelRatio } from 'ranuts';

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const ratio = getPixelRatio(ctx);

// Adjust Canvas size according to ratio
canvas.width = canvas.clientWidth * ratio;
canvas.height = canvas.clientHeight * ratio;

// Scale context to maintain correct drawing size
ctx.scale(ratio, ratio);

Draw Clear Graphics

import { getPixelRatio } from 'ranuts';

function drawHighDPI(canvas) {
  const ctx = canvas.getContext('2d');
  const ratio = getPixelRatio(ctx);

  // Set actual size
  canvas.width = canvas.clientWidth * ratio;
  canvas.height = canvas.clientHeight * ratio;

  // Scale context
  ctx.scale(ratio, ratio);

  // Draw content (using logical pixels)
  ctx.fillRect(10, 10, 100, 100);
}

Notes

Cross-browser compatibility: Supports backingStorePixelRatio property of different browsers.
High DPI support: Automatically handles high DPI (Retina) screens, ensuring clear graphics.
Calculation method: Returns devicePixelRatio / backingStorePixelRatio.
Use case: Commonly used for Canvas drawing, chart libraries, game development, etc., where high clarity is needed.