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

Popular posts from this blog

Java 3D LWJGL collision -

spring - SubProtocolWebSocketHandler - No handlers -

methods - python can't use function in submodule -