JSFiddle - React, Tailwind, and code Playground

by gRoberts

HTML

<form id="build-message">
    <fieldset>
        <legend>Message</legend>
        <textarea name="message" id="message"></textarea>
        <br>
        <label for="type">Image:</label>
        <select name="type" id="type">
            <option value="http://www.rottenecards.com/cardPic/dep_6848192-Caricature-businessman-frightened.png">Image 1</option>
        </select>
        <br>
        <input type="submit" value="Add message">
        <input type="reset" value="Reset">
    </fieldset>
</form>
<div id="messages">
    
</div>

CSS

.message { background: #CCCCCC; }

JavaScript

function addMessage(message, image) {
    var cvs = document.createElement('canvas'),
        ctx = cvs.getContext('2d'),
        img = new Image();
    cvs.width = 490;
    cvs.height = 294;
    img.src = image;
    img.onload = function() {
        var x = (cvs.width - img.width);
        var y = (cvs.height - img.height);
        ctx.drawImage(img, x, y, img.width, img.height);
        
        ctx.font = '16pt Comic sans';
        ctx.fillText(message, 20, 35);
    };
    cvs.className = 'message';
    $('#messages').append(cvs);
};
(function($) {
    $('#build-message').submit(function(e) {
        e.preventDefault();
        addMessage.call(this, this.message.value, this.type.value);
    });
})(jQuery);