在 Retina 显示器上将 HTML 渲染到 Canvas答案

【问题标题】：Rendering HTML to Canvas on Retina displays在 Retina 显示器上将 HTML 渲染到 Canvas
【发布时间】：2015-08-20 22:00:33
【问题描述】：

This MDN article（引用this blog post）教授如何将 HTML 内容呈现到画布上。我已经在我的项目中实现了它并且它有效。

但在“视网膜”显示器上，它仅以显示器支持的全分辨率的一半绘制到画布上。例如，如果我有一个画布，我在画布上呈现 HTML 字符串“Hello”，并在画布旁边放了一个 <span>Hello</span>，后者（由浏览器以通常的方式呈现）比前者（呈现作为 HTML 到画布上，使用上面链接中的技术，该技术使用 SVG 和 Image)。

我相信有一种方法可以检测视网膜显示器，以便我知道何时需要更高的分辨率，在 this source code 中给出。但是当我检测到我在视网膜显示器上时，我的问题是：

有没有一种方法可以以全视网膜分辨率将 HTML 渲染到画布上？

【问题讨论】：

标签： javascript html canvas svg retina-display

【解决方案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";

我已经试过了 - 它有效！

【讨论】：