キャンバステキストと画像がぼやけて

Question

キャンバスのテキストがぼやけていて、描画されているイメージがぼやけている理由はわかりませんが、これは私がイメージとテキストでキャンバスを作成する方法の例です。

https://jsfiddle.net/jorge182/5ju5pLqb/2/

var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 
var imageObj = new Image(); 

     imageObj.onload = function() { 
     context.save(); 
      context.beginPath(); 
      context.arc(25, 25, 25, 0, Math.PI * 2, true); 
     context.closePath(); 
     context.clip(); 

     context.drawImage(imageObj, 0, 0, 50, 50); 

     context.beginPath(); 
     context.arc(0, 0, 25, 0, Math.PI * 2, true); 
     context.clip(); 
     context.closePath(); 
     context.restore(); 

     context.lineWidth = 2; 

     context.textAlign = 'left'; 
       context.font = '8pt Signika Negative'; 
       context.fillStyle = 'black'; 
       context.fillText('Jorge', 60, 15); 
       context.fillText(' have been here!', 60, 30); 

     context.font = '6pt Signika Negative'; 
     context.textAling = 'left'; 
     context.fillStyle = '#555'; 
     context.fillText('Caribe Photo Weading Photograpy', 60, 40); 

     }; 
     imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg' 

Answer 1

あなたが元のサイズからあまりにも多くの画像をリサイズするのでぼやけた画像は、おそらくです。下のjsFiddleを見てください。大きさの半分のサイズに変更してもまだ見栄えが良いのがわかります。私は1つのポストが非常に役に立ったぼやけたテキストのために

https://jsfiddle.net/gracegotlost/5ju5pLqb/3/

var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 
var imageObj = new Image(); 

     imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 
     imageObj.onload = function() { 
     var width = imageObj.width; 
     var height = imageObj.height; 

     context.save(); 
      context.beginPath(); 
      context.arc(width/2, height/2, 150, 0, Math.PI * 2, true); 
     context.fill(); 
     context.closePath(); 
     context.clip(); 

     context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height); 

     context.beginPath(); 
     context.arc(0, 0, 25, 0, Math.PI * 2, true); 
     context.clip(); 
     context.closePath(); 
     context.restore(); 

     context.textAlign = 'left'; 
       context.font = '32pt Signika Negative'; 
       context.fillStyle = 'black'; 
       context.fillText('Jorge', 60, 350); 
       context.fillText(' have been here!', 150, 350); 

     context.font = '20pt Signika Negative'; 
     context.textAling = 'left'; 
     context.fillStyle = '#555'; 
     context.fillText('Caribe Photo Weading Photograpy', 60, 400); 

     }; 

。あなたがテキストサイズを増やすことができれば、それは良くなりますが、それを次のようにあなたは、おそらくだろう、より高い解像度を与えるために：

https://stackoverflow.com/a/15666143/4809052

を最初の答えは非常に有用であるギザギザのエッジのために。