javascript - Rendering HTML to Canvas on Retina displays -
this mdn article (citing this blog post) teaches how render html content canvas. i've implemented in project , works.
but on "retina" displays, draws canvas @ half of full resolution display supports. example, if have canvas on render html string "hello" , next canvas put <span>hello</span>
, latter (rendered browser usual way) smoother , crisper former (rendered html onto canvas, using technique in links above, uses svg , image
).
i believe there's way detect retina displays, know when higher resolution needed, given in this source code. when detect i'm on retina display, question is:
is there method renders html canvas @ full retina resolution?
look @ post
var image = new image(); var ratio = window.devicepixelratio || 1; var canvas = document.queryselector("canvas"); var context = canvas.getcontext("2d"); // 1. ensure element size stays same. canvas.style.width = canvas.width + "px"; canvas.style.height = canvas.height + "px"; // 2. increase canvas dimensions pixel ratio. canvas.width *= ratio; canvas.height *= ratio; image.onload = function() { // 3. scale context pixel ratio. context.scale(ratio, ratio); context.drawimage(image, 0, 0); }; image.src = "/path/to/image.svg";
i've tried - works!
Comments
Post a Comment