jQuery(document).ready(function() {
  jQuery("#data").mask("00.00.00");
  jQuery("input").val("");
  var img = new Image();
  canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext("2d");
  const FONT_NAME = 'Futura_XBlkIt';
  function validador(id, x, y, cnt) {
    if (jQuery(id).val()) {
      ctx.fillText(jQuery(id).val().toUpperCase(), x, y);
    } else {
      ctx.fillText(cnt, x, y);
    }
  }
  var xResponsive = 0;
  var lastLetter = "";
  function desenhar() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img,0,0);
    ctx.shadowColor = 'rgba(250,250,250,1)';
    ctx.shadowBlur = 30;
    ctx.shadowOffsetY = 0;
    ctx.shadowOffsetX = 0;
    ctx.fillStyle = '#afca0b';
    ctx.textAlign='center';
    ctx.font = `100px "${FONT_NAME}"`;
    validador("#name", canvas.width/2, canvas.height-370, "Nome");
  }

  function downloadCanvas(link, filename) {
    link.href = document.getElementById('myCanvas').toDataURL();
    link.download = filename;
  }

  jQuery("#download").on('click', function(e) {
    downloadCanvas(this, jQuery("#name").val()+'.png');
  });

  jQuery("input").on('keyup', function(e) {
    desenhar();
    // console.log(jQuery("#name2").val().length);
  });
  desenhar();

  jQuery(img).attr("src", 'assets/img/bg.png')
  .load(function() {
    desenhar();
  });
});