Come posso correggere il testo sfocato nel mio canvas HTML5?

Question

Sono un totale n00b con HTML5 e sto lavorando con lo canvas per il rendering di forme, colori e testo. Nella mia app, ho un adattatore della vista che crea una tela in modo dinamico e la riempie di contenuto. Funziona molto bene, tranne che il mio testo è reso molto sfocato/sfocato/allungato. Ho visto molti altri post sul perché la definizione della larghezza e l'altezza in CSS causeranno questo problema, ma io definisco tutto in javascript.

Il relativo codice (vista Fiddle):

HTML

<div id="layout-content"></div> 

Javascript

var width = 500;//FIXME:size.w; 
var height = 500;//FIXME:size.h; 

var canvas = document.createElement("canvas"); 
//canvas.className="singleUserCanvas"; 
canvas.width=width; 
canvas.height=height; 
canvas.border = "3px solid #999999"; 
canvas.bgcolor = "#999999"; 
canvas.margin = "(0, 2%, 0, 2%)"; 

var context = canvas.getContext("2d"); 

////////////////// 
//// SHAPES //// 
////////////////// 

var left = 0; 

//draw zone 1 rect 
context.fillStyle = "#8bacbe"; 
context.fillRect(0, (canvas.height*5/6)+1, canvas.width*1.5/8.5, canvas.height*1/6); 

left = left + canvas.width*1.5/8.5; 

//draw zone 2 rect 
context.fillStyle = "#ffe381"; 
context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*2.75/8.5, canvas.height*1/6); 

left = left + canvas.width*2.75/8.5 + 1; 

//draw zone 3 rect 
context.fillStyle = "#fbbd36"; 
context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*1.25/8.5, canvas.height*1/6); 

left = left + canvas.width*1.25/8.5; 

//draw target zone rect 
context.fillStyle = "#004880"; 
context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*0.25/8.5, canvas.height*1/6); 

left = left + canvas.width*0.25/8.5; 

//draw zone 4 rect 
context.fillStyle = "#f8961d"; 
context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*1.25/8.5, canvas.height*1/6); 

left = left + canvas.width*1.25/8.5 + 1; 

//draw zone 5 rect 
context.fillStyle = "#8a1002"; 
context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width-left, canvas.height*1/6); 

//////////////// 
//// TEXT //// 
//////////////// 

//user name 
context.fillStyle = "black"; 
context.font = "bold 18px sans-serif"; 
context.textAlign = 'right'; 
context.fillText("User Name", canvas.width, canvas.height*.05); 

//AT: 
context.font = "bold 12px sans-serif"; 
context.fillText("AT: 140", canvas.width, canvas.height*.1); 

//AB: 
context.fillText("AB: 94", canvas.width, canvas.height*.15); 

//this part is done after the callback from the view adapter, but is relevant here to add the view back into the layout. 
var parent = document.getElementById("layout-content"); 
parent.appendChild(canvas); 

I risultati sto vedendo (in Safari) sono molto più distorto rispetto a quello mostrato nel Fid dle:

miniera

Fiddle

Che cosa sto facendo in modo errato? Ho bisogno di una tela separata per ogni elemento di testo? È il carattere? Devo prima definire la tela nel layout HTML5? C'è un errore di battitura? Mi sono perso.

Answer 1

L'elemento tela corre indipendente dal dispositivo o rapporto pixel del monitor.

Su iPad 3+, questo rapporto è 2. Ciò significa in sostanza che il tuo canvas con larghezza di 1000 px ora dovrà riempire 2000 px per adattarlo alla larghezza dichiarata sul display dell'iPad. Fortunatamente per noi, questo viene fatto automaticamente dal browser. D'altra parte, questo è anche il motivo per cui vedi meno definizione su immagini e elementi di tela che sono stati fatti per adattarsi direttamente alla loro area visibile. Poiché la tua tela sa solo come riempire 1000px ma gli viene chiesto di disegnare a 2000px, il browser deve ora compilare in modo intelligente gli spazi vuoti tra i pixel per visualizzare l'elemento alle sue dimensioni appropriate.

consiglio vivamente di leggere this article da HTML5Rocks che spiega più in dettaglio come creare elementi ad alta definizione.

tl; dr? Ecco un esempio (sulla base del tut sopra) che uso nei miei progetti per sputare fuori una tela con la giusta risoluzione:

var PIXEL_RATIO = (function() { 
    var ctx = document.createElement("canvas").getContext("2d"), 
     dpr = window.devicePixelRatio || 1, 
     bsr = ctx.webkitBackingStorePixelRatio || 
       ctx.mozBackingStorePixelRatio || 
       ctx.msBackingStorePixelRatio || 
       ctx.oBackingStorePixelRatio || 
       ctx.backingStorePixelRatio || 1; 

    return dpr/bsr; 
})(); 


createHiDPICanvas = function(w, h, ratio) { 
    if (!ratio) { ratio = PIXEL_RATIO; } 
    var can = document.createElement("canvas"); 
    can.width = w * ratio; 
    can.height = h * ratio; 
    can.style.width = w + "px"; 
    can.style.height = h + "px"; 
    can.getContext("2d").setTransform(ratio, 0, 0, ratio, 0, 0); 
    return can; 
} 

//Create canvas with the device resolution. 
var myCanvas = createHiDPICanvas(500, 250); 

//Create canvas with a custom resolution. 
var myCustomCanvas = createHiDPICanvas(500, 200, 4); 

Spero che questo aiuti!

Answer 2

Risolto!

ho deciso di vedere cosa cambiare l'altezza larghezza e attributi ho impostato in javascript per vedere come che ha colpito le dimensioni della tela - e non ha fatto. Cambia la risoluzione.

Per ottenere il risultato che volevo, avevano anche impostare l'attributo canvas.style.width, che cambia la dimensione fisica del canvas:

canvas.width=1000;//horizontal resolution (?) - increase for better looking text 
canvas.height=500;//vertical resolution (?) - increase for better looking text 
canvas.style.width=width;//actual width of canvas 
canvas.style.height=height;//actual height of canvas 

Answer 3

Ridimensiono elemento canvas tramite css per occupare tutta la larghezza dell'elemento padre. Ho notato che la larghezza e l'altezza del mio elemento non sono ridimensionate. Stavo cercando il modo migliore per impostare la dimensione che dovrebbe essere.

canvas.width = canvas.clientWidth; 
canvas.height = canvas.clientHeight; 

Questo modo semplice di impostare la tua tela perfettamente, non importa quale schermata si utilizzerà.

Answer 4

Ho adattato leggermente il codice MyNameIsKo sotto canvg (libreria jg di SVG to Canvas). Sono stato confuso per un po 'e ho passato un po' di tempo per questo. Spero che questo aiuti qualcuno.

HTML

<div id="chart"><canvas></canvas><svg>Your SVG here</svg></div> 

Javascript

window.onload = function() { 

var PIXEL_RATIO = (function() { 
    var ctx = document.createElement("canvas").getContext("2d"), 
     dpr = window.devicePixelRatio || 1, 
     bsr = ctx.webkitBackingStorePixelRatio || 
       ctx.mozBackingStorePixelRatio || 
       ctx.msBackingStorePixelRatio || 
       ctx.oBackingStorePixelRatio || 
       ctx.backingStorePixelRatio || 1; 

    return dpr/bsr; 
})(); 

setHiDPICanvas = function(canvas, w, h, ratio) { 
    if (!ratio) { ratio = PIXEL_RATIO; } 
    var can = canvas; 
    can.width = w * ratio; 
    can.height = h * ratio; 
    can.style.width = w + "px"; 
    can.style.height = h + "px"; 
    can.getContext("2d").setTransform(ratio, 0, 0, ratio, 0, 0); 
} 

var svg = document.querySelector('#chart svg'), 
    canvas = document.querySelector('#chart canvas'); 

var svgSize = svg.getBoundingClientRect(); 
var w = svgSize.width, h = svgSize.height; 
setHiDPICanvas(canvas, w, h); 

var svgString = (new XMLSerializer).serializeToString(svg); 
var ctx = canvas.getContext('2d'); 
ctx.drawSvg(svgString, 0, 0, w, h); 

} 

Answer 5

Questo 100% risolto per me:

var canvas = document.getElementById('canvas'); 
canvas.width = canvas.getBoundingClientRect().width; 
canvas.height = canvas.getBoundingClientRect().height; 

(è vicino alla soluzione di Adam Mankowski).