JSFiddle - React, Tailwind, and code Playground

by David Simpson

HTML

<canvas id="canvas" width="100" height="100"></canvas><br>

<img id="targetImg"  src alt="*" />

CSS

canvas {
  border: 1px solid hotpink;
}

img {
  border-radius: 50%;
  border: 1px solid hotpink;
  width: 100px;
  height: 100px;
}

JavaScript

console.log('onload')

	var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
  
  var ctx = canvas.getContext('2d');

    var img1 = new Image();

    //drawing of the test image - img1
    img1.onload = function () {
      //draw background image
      ctx.drawImage(img1, 0, 0);

      var base64String = canvas.toDataURL();
          
      console.log(base64String)

    };


    img1.src = "https://www.gravatar.com/avatar/dabc8480fbeffac58f2207eb653ef440?s=100";
    
    
  }