JSFiddle - React, Tailwind, and code Playground

by ajmeese7

HTML

<canvas id="canvas" width=300 height=300></canvas>
<a id="download" download>
  <button id="downloadButton" type="button" class="btn btn-outline-success">Download</button>
</a>

CSS

body {
        background-color: ivory;
    }
    canvas {
        border:1px solid red;
    }

JavaScript

var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");

function showIntro() {
  var phrase = "Click or tap screen to start";
  var logoImg = new Image();
  logoImg.onload = function () {
    c.clearRect(0, 0, canvas.width, canvas.height);

    var grd = c.createLinearGradient(0, 0, canvas.width, canvas.height);
    grd.addColorStop(0, "#9db7a0");
    grd.addColorStop(1, "#e6e6e6");
    c.fillStyle = grd;
    c.fillRect(0, 0, canvas.width, canvas.height);

    var originalWidth = logoImg.width;
    logoImg.width = Math.round((50 * document.body.clientWidth) / 100);
    logoImg.height = Math.round((logoImg.width * logoImg.height) / originalWidth);

    var logo = {
      img: logoImg,
      x: (canvas.width / 2) - (logoImg.width / 2),
      y: (canvas.height / 2) - (logoImg.height / 2)
    }
    c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);

    c.font = "bold 16px sans-serif";
    var mt = c.measureText(phrase);
    var xcoord = (canvas.width / 2) - (mt.width / 2);
    c.fillStyle = '#656565'
    c.fillText(phrase, xcoord, 30);

  }
  logoImg.src = "https://homepages.cae.wisc.edu/~ece533/images/frymire.png";
  let download = document.getElementById("download");
  download.href = canvas.toDataURL("image/png");
}

showIntro();