JSFiddle - React, Tailwind, and code Playground

by Grace Gou

HTML

<canvas id="myCanvas" width="600" height="500"></canvas>

JavaScript

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