Рендеринг HTML на холст на дисплеях Retina

Question

This MDN article (цитирует this blog post) учит, как визуализировать содержимое HTML на холсте. Я реализовал его в своем проекте, и он работает.

Но на дисплеях «сетчатки» он рисует на холсте только половину полного разрешения, которое поддерживает дисплей. Например, если у меня есть холст, на котором я визуализую строку HTML «Hello», а рядом с холстом я помещаю <span>Hello</span>, последний (отображаемый браузером обычным способом) является более гладким и четким, чем предыдущий (отображается как HTML на холст, используя технику в ссылках выше, в которой используется SVG и Image).

Я считаю, что есть способ обнаружить сетчатки, чтобы я знал, когда требуется более высокое разрешение, данное в this source code. Но когда я обнаруживаю, что я на экране сетчатки, мой вопрос:

Есть ли метод, который отображает HTML на холст при полном разрешении сетчатки?

Answer 1

Посмотрите на этот post

var image = new Image(); 
var ratio = window.devicePixelRatio || 1; 
var canvas = document.querySelector("canvas"); 
var context = canvas.getContext("2d"); 

// 1. Ensure the element size stays the same. 
canvas.style.width = canvas.width + "px"; 
canvas.style.height = canvas.height + "px"; 

// 2. Increase the canvas dimensions by the pixel ratio. 
canvas.width *= ratio; 
canvas.height *= ratio; 

image.onload = function() { 
    // 3. Scale the context by the pixel ratio. 
    context.scale(ratio, ratio); 
    context.drawImage(image, 0, 0); 
}; 
image.src = "/path/to/image.svg"; 

Я пробовал - это работает!