JSFiddle - React, Tailwind, and code Playground

by jcutrell

HTML

<textarea name="mtext"></textarea>
<canvas id="memetext"></canvas>
<button>Download</button>

JavaScript

var c = document.getElementById("memetext");
var img = new Image();
var context;
  img.src = 'http://fanboyz.net/wp-content/uploads/2011/05/george-bluth.jpg';
$(img).on("load", function(e){
    c.width = img.width;
    c.height = img.height;
    context = c.getContext("2d");
    context.drawImage(img,0,0);
});
$("textarea").on("keyup", function(){
    var v = $(this).val();
    var textSize = context.measureText(v);
    c.width = c.width;
    context.drawImage(img,0,0);
    context.font = "bold 18px sans-serif";
    context.shadowColor = "#000000";
    context.shadowOffsetX = 0;
    context.shadowOffsetY = 0;
    context.shadowBlur = 4;
    context.fillStyle = "#fff";
    context.textAlign = "center";
    if (textSize.width > c.width - 20){
        var ar = v.split(" ");
        var firstline = ar.slice(0, ar.length/2).join(" ");
        var secondline = ar.slice(ar.length/2, ar.length).join(" ");
        context.fillText(firstline, img.width/2, 20);
        context.fillText(secondline, img.width/2, 40);
    } else {
        context.fillText(v, img.width/2, 20);
    }
});
$("button").on("click", function(){
    var download = c.toDataURL("image/png");
    $("<a href='"+download+"'>Click here to see this in another window</a>").appendTo("body");
});