Canvas Text and image blurry

Question

I don´t know why the text in canvas is blurry and the image drawed is also blurry, this is my example how I create the canvas with the image and text.

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

The blurry image is probably because you resized the image too much from its original size. Take a look at the jsFiddle below and you can see if you only resize half of its size it's still looking good.

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);

      };

For the blurry text I found one post very helpful. If you can increase the text size it will look better, but to give it even more higher resolution you would probably do as follows:

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

For the jagged edge the first answer is very helpful.