Error in canvas quality

0

Why does the filltext font look like this?

  

Code:

/* Área de programación */ 

$(function(){
 var w = window;
    var d = document;
    var dW = d.body.clientWidth;
    var dH = d.body.clientHeight;
    console.log(dW);
 var c = d.getElementById("can");   
 var ctx = c.getContext("2d");
    /* Dibujando el fondo */
ctx.fillStyle = "#111111";
 ctx.fillRect(0,0,dW,dH); 
    /* Dibujando el título */

    ctx.font = "7px monospace";
    ctx.fillStyle = "#FFFFFF";
    ctx.fillText("Programando en Cosmos Theories !",20,50);   
    ctx.fill();


});




/* Fin */
    
asked by Eduardo Sebastian 13.08.2017 в 23:56
source

1 answer

0

The visualization quality is due to the fact that canvas handles pixels, we must always be careful with the dimensions. For example if you adjusted the size of the canvas with CSS.

This is the result that I obtained using your example and in html I only included the canvas tag.

    
answered by 14.08.2017 в 05:49