Texts

by Elazar Fein

HTML

<body>
  <div class="container">
    <div style="text-align: left;" class="ui-droppable"><b style="background-color: #000000;"><font color="#ffffff"><br /></font></b></div>
    <canvas id="paper" width="512" height="128" style="border: 1px solid #c3c3c3;"> Your browser does not support the HTML5 canvas tag. </canvas>
    <h1>
        <a href="#" id="btn" class="button" download="canvaShot.png">Download</a>
        </h1>
    <div class="form">
      <h2>Press Enter to insert text:</h2>
      <input name="txt" type="text" onkeydown="if (event.keyCode == 13) Start()" maxlength="20" id="txt" />
    </div>
    <div class="form">
      <h2>Press here to pick inside color:</h2>
      <input type="color" id="copic" name="favcolor" value="#ff0000">
    </div>
    <div class="form">
      <h2>Press here to pick edge color:</h2>
      <input type="color" id="copic2" name="favcolor" value="#ff0000">
    </div>
    <div class="form">
      <h2>Change the speed here (lower=faster):</h2>
      <form onsubmit="return false" oninput="level.value = speed.valueAsNumber">
        <label for="speed">Speed</label>
        <input type="range" id="speed" name="speed" min="0" max="30" value="10"> [min: 0]-[value:
        <output for="speed" name="level">10</output>]-[max: 30]
      </form>
    </div>
    <div class="form">
      <h2>Change the clear type here:</h2>
      <form onsubmit="return false" oninput="clr.value = clear.valueAsNumber">
        <label for="clear">Clear</label>
        <input type="range" id="clear" name="clear" min="0" max="10" value="20"> [min: 0]-[value:
        <output for="clear" name="clr">10</output>]-[max: 10]
      </form>
    </div>
  </div>
</body>

CSS

a:link {
  color: white;
  background-color: transparent;
  text-decoration: none
}

a:visited {
  color: gray;
  background-color: transparent;
  text-decoration: none
}

a:hover {
  color: black;
  background-color: transparent;
  text-decoration: underline
}

a:active {
  color: blue;
  background-color: transparent;
  text-decoration: underline
}

body {
  font-family: 'Francois One', sans-serif;
  font-size: 100%;
  /* whatever base font size I want */
  background-color: #000066;
}

.container > * {
  margin-left: 30px;
}

.container > form {
  padding-bottom: 30px;
}

#paper {
  margin-top: 5px;
  margin-bottom: -10px;
  margin-right: 0px;
  margin-left: 30px;
}

.container {
  width: 575px;
  padding-bottom: 20px;
  color: #ddd;
  background-color: #000080;
}

div.form {
  background-color: #3366ff;
  padding-top: 5px;
  padding-bottom: 10px;
  padding-left: 5px;
  margin-bottom: 10px;
  border-left: 10px solid blue;
  width: 78%;
}

input {
  font-size: 26px;
}

input[type=text] {
  font-size: 35px;
  padding: 5px 5px;
}

input[type=range] {
  -webkit-appearance: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 400px;
  height: 5px;
  background: #b3ccff;
  border: none;
  border-radius: 5px;
}

input[type=range]:focus::-webkit-slider-thumb {
  background: #4d4dff;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: blue;
  margin-top: -7.5px;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #e6eeff;
}

input[type=color] {
  width: 97%;
  height: 30px;
}

.button {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  padding: 10px 180px;
  border: 5px solid #030038;
  border-radius: 10px;
  background: #006fff;
  background: -webkit-gradient(linear, left top, left bottom, from(#006fff), to(#002ec7));
  background: -moz-linear-gradient(top,...

JavaScript

var act = false;
var ca = document.getElementById("paper");
var c = ca.getContext("2d");
var button = document.getElementById('btn');
button.addEventListener('click', function(e) {
  var dataURL = ca.toDataURL('image/png');
  button.href = dataURL;
});

function Start() {

  act = true;
  var txto = document.getElementById("txt").value;
  var x = ca.width / 2;
  var y = ca.height / 2;
  var r = 0;
  var r2 = 50;
  var b = true;
  var cp = document.getElementById("copic").value;
  var cp2 = document.getElementById("copic2").value;


  //c.fillStyle = "black";
  //c.fillStyle = "rgba(255, 255, 255,0.1)";
  //c.fillRect(0, 0, ca.width, ca.height);

  function comToHex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
  }

  function text(c, back, fore, x, y, text) {

    c.fillStyle = back;
    c.fillText(text, x, y + 1);
    c.fillText(text, x, y - 1);
    c.fillText(text, x + 1, y);
    c.fillText(text, x - 1, y);

    c.fillStyle = fore;
    c.fillText(text, x, y);
  }

  var o = 0;
  var f = 100;
  setInterval(function() {

    o++;
    c.lineWidth = "1";
    c.font = f + "px Arial";
    text(c, cp2, cp, o, f, txto);
    if (o >= (ca.width)) {
      o = -1 * ((f * txto.length) / 2);
    }
  }, sp);;

}

setInterval(function() {
  sp = document.getElementById("speed").value;
  cl = document.getElementById("clear").value;
  c.fillStyle = "rgba(0, 0, 0," + cl / 100 + ")";
  c.fillRect(0, 0, ca.width, ca.height);
}, 10);;