From 72d68c7627fe97667376cd8ed36dee581692c419 Mon Sep 17 00:00:00 2001 From: Chris Morgan Date: Fri, 19 Aug 2016 09:19:21 +1000 Subject: [PATCH] Support Hi-DPI screens better in the examples MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Text respects the device pixel ratio, but canvas doesn’t automatically; adjusting its scaling makes it render in terms of device pixels rather than CSS screen pixels. Thus we get non-fuzzy text in the canvas. --- examples/article/index.html | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/examples/article/index.html b/examples/article/index.html index d10bd2b..0f30338 100644 --- a/examples/article/index.html +++ b/examples/article/index.html @@ -164,8 +164,15 @@

References

function align(identifier, type, lineLengths, tolerance, center) { var canvas = $(identifier).get(0), context = canvas.getContext && canvas.getContext('2d'), + devicePixelRatio = window.devicePixelRatio || 1, format, nodes, breaks; if (context) { + canvas.style.width = canvas.width + 'px'; + canvas.style.height = canvas.height + 'px'; + canvas.width *= devicePixelRatio; + canvas.height *= devicePixelRatio; + context.scale(devicePixelRatio, devicePixelRatio); + context.textBaseline = 'top'; context.font = "14px 'times new roman', 'FreeSerif', serif";