getPixelRatio

Obtiene la relación de resolución del contexto de un canvas, para tratar pantallas de alta densidad.

API

getPixelRatio

Devuelve

Argumento	Descripción	Tipo
`number`	La relación de píxeles	`number`

Parámetros

Parámetro	Descripción	Tipo	Por defecto
`context`	Contexto de dibujo 2D del canvas	`CanvasRenderingContext2D`	Obligatorio

Ejemplo

Uso básico

import { getPixelRatio } from 'ranuts';

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const ratio = getPixelRatio(ctx);
console.log('Relación de píxeles:', ratio);

Adaptarse a pantallas de alta densidad

import { getPixelRatio } from 'ranuts';

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

// Ajustar el tamaño del canvas a la relación
canvas.width = canvas.clientWidth * ratio;
canvas.height = canvas.clientHeight * ratio;

// Escalar el contexto para conservar el tamaño de dibujo
ctx.scale(ratio, ratio);

Dibujar con nitidez

import { getPixelRatio } from 'ranuts';

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

  // Fijar el tamaño real
  canvas.width = canvas.clientWidth * ratio;
  canvas.height = canvas.clientHeight * ratio;

  // Escalar el contexto
  ctx.scale(ratio, ratio);

  // Dibujar el contenido (en píxeles lógicos)
  ctx.fillRect(10, 10, 100, 100);
}

Notas

Compatibilidad: contempla la propiedad backingStorePixelRatio de los distintos navegadores.
Alta densidad: trata solo las pantallas de alta densidad (Retina), de modo que el dibujo salga nítido.
Cómo lo calcula: devuelve devicePixelRatio / backingStorePixelRatio.
Cuándo usarlo: es habitual al dibujar en canvas, en librerías de gráficos y en desarrollo de juegos, donde la nitidez importa.