JSFiddle - React, Tailwind, and code Playground

by dylanjha

HTML

<script src="https://fonts.googleapis.com/css?family=Lato:100,300,400,700"></script>
<canvas id="questionOverlayCanvas" width="200" height="80"></canvas>

<div id="clear">CLEAR IT</div>
<br>
<div id="run">RUN IT</div>
    
<div>
    <img id="img-target" src="" />
</div>

JavaScript

QuestionCanvas = (function() {
    function QuestionCanvas(canvas) {
      this.maxWidth = 600;
      // this.whitespaceRE = new RegExp(' +');
      // this.newlineRE = new RegExp("\\s*[\n\r]+\\s*", "gm");
      this.minSize = 1;
      this.canvas = canvas;
      this.lineCount = 0;
      this.lineHeight = 24;
      this.posY = 30;
      this.posX = 50;
      this.context = this.canvas.getContext('2d');
      this.questionFontSize = "24px";
      this.authorFontSize = "18px";
      this.fontFamily = "Lato, Helvetica Neue, Helvetica, Arial, sans-serif";
    }
    QuestionCanvas.prototype.drawBg = function() {
      var height = parseInt(this.canvas.getAttribute("height"));
      var width = parseInt(this.canvas.getAttribute("width"));
      this.context.fillStyle = "rgba(0, 0, 0, 0.5)";
      this.context.fillRect(0, 0, width, height);
    };
    QuestionCanvas.prototype.drawQuestionText = function() {
      var self = this,
          words = this.questionText.split(" "),
          line = '';

      this.context.fillStyle = 'white';
      this.context.font = this.questionFontSize + " " + this.fontFamily;
      this.context.textAlign = 'left';

      for(var n = 0; n < words.length; n++) {
        var testLine = line + words[n] + ' ';
        var testWidth = self.context.measureText(testLine).width;
        if (testWidth > self.maxWidth && n > 0) {
          self.lineCount++
          // cap it at two lines
          if (self.lineCount === 2) {
            line = line + "...";
            self.context.fillText(line, self.posX, self.posY);
            return;
          } else {
            self.context.fillText(line, self.posX, self.posY);
            line = words[n] + ' ';
            self.posY += self.lineHeight;
          }
        }
        else {
          line = testLine;
        }
      }
      this.context.fillText(line, self.posX, self.posY);
    }

    QuestionCanvas.prototype.drawAuthor = function(onComplete) {
      var self = this;
      this.posY +=...