JSFiddle - React, Tailwind, and code Playground

by Jorge Mejia

HTML

<canvas id="myCanvas" width="578" height="200"></canvas>

JavaScript

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'