JSFiddle - React, Tailwind, and code Playground

by gRoberts

HTML

<form name="add_message">
    <fieldset>
        <legend>Message</legend>
        <textarea name="message" required></textarea>
        <br>
        <label for="image">Image: </label>
        <select name="image" id="image">
            <option value="http://www.rottenecards.com/cardPic/boys_families_201127_tnbi2.png">Test 1</option>
        </select>
        <br>
        <input type="submit" value="Add message">
        <input type="reset" value="Clear">
    </fieldset>
</form>
<div id="messages">
    
</div>

CSS

.message { width: 420px; height: 294px; }

JavaScript

function displayMessage(message, image) {
    var messages = document.getElementById('messages');
    if (!messages) {
        console.log('Unable to find the messages object');
        return;
    }
    var item = document.createElement('canvas');
    item.className = 'message';
    messages.appendChild(item);
    
    var img = document.createElement('img');
    img.src = image;
    img.alt = img.title = message;
    
    var ctx = item.getContext('2d');
    if (!ctx) {
        console.log('Unable to define the canvas context');
        return;        
    }
    ctx.drawImage(img, 0, 0, img.width, img.height);
};
(function() {
    var form = document.forms.add_message.onsubmit = function(e) {
        var message = this.message.value;
        if (message && message.length > 0) {
            displayMessage(message, this.image.value);
        }
        return false;
    };
    //http://www.rottenecards.com/cardPic/boys_families_201127_tnbi2.png
})();