JSFiddle - React, Tailwind, and code Playground

by WeBMartians

HTML

<head>
  <title>Try Canvas-generated Img</title>
  <script>
    function CopyOnClick() {
      var /*source*/ src = document.getElementById('sourceDIV');
      if (document.body.createTextRange) {
        var /*range*/ rng = document.body.createTextRange();
        rng.moveToElementText(src);
        rng.select();
      } else if (window.getSelection) {
        var /*range*/ rng = document.createRange();
        rng.selectNodeContents(src);
        var /*selection*/ slc = window.getSelection();
        slc.removeAllRanges();
        slc.addRange(rng);
      }
      document.execCommand('Copy');
      document.body.removeChild(itm);
    }

    function PageOnLoad() { //handle load event on page
      // Create a work canvas, draw a simple image in it, and then copy that image to the img items.
      var /*canvas (result)*/ cvs = document.createElement('canvas');
      cvs.height = document.getElementById('testIMG1').clientHeight;
      cvs.width = document.getElementById('testIMG1').clientWidth;
      var /*context*/ ctx = cvs.getContext('2d');
      ctx.fillStyle = 'silver';
      ctx.fillRect(0, 0, cvs.width, cvs.height);
      ctx.fillStyle = 'black';
      ctx.moveTo(0, 0);
      ctx.lineTo(cvs.width, cvs.height);
      ctx.stroke();

      // Copy canvas image to both img items.
      document.getElementById('testIMG1').src = cvs.toDataURL('image/jpg'); //Amazon page's images are JPEGs
      document.getElementById('testIMG2').src = cvs.toDataURL('image/jpg');
    }

  </script>
</head>

<body onload="PageOnLoad();">
  <div id="sourceDIV" contenteditable>
    <table width="50%">
      <tr>
        <td align="right">Img 1:</td>
        <td><img id="testIMG1" style="border:solid;height:30px;width:100px;" /></td>
      </tr>
      <tr>
        <td align="right">Img 2:</td>
        <td><img id="testIMG2" style="border:solid;height:30px;width:100px;" /></td>
      </tr>
    </table>
    <input onclick="CopyOnClick();" style="border:solid;" type="button"...