JSFiddle - React, Tailwind, and code Playground

by chovy

HTML

<div id="cd">
    <form id="text"><input type="text" /></form>
    <canvas id="e" width="200" height="200"></canvas>
</div>
<a href="#" id="texttool">texttool</a>

CSS

#cd { border: 1px solid red; width: 200px; height: 200px; position: relative; display: block; }
#text { position: absolute; top: 0; left: 0; display: none; margin: 0; padding: 0; }

JavaScript

function write(text, x, y){
    var canvas = document.getElementById("e");
    var context = canvas.getContext("2d");
    context.fillStyle = "red";
    context.font = "bold 16px Arial";
    context.fillText(text, x, y);
}


$("#cd").click(function(e){
    $("#cd").off('mousemove');
});

function resetForm(){
    var $form = $("#text")
    , $input = $form.find('input')
    , offset = $input.offset();
    
    $form.hide().css({ left: 0, bottom: 0, top: 'auto' });
    write($input.val(), offset.left, offset.top);
    $input.val('');
}

$("#text").submit(function(e){
    e.preventDefault();
    resetForm();
});

$("#text input").blur(resetForm);

$("#texttool").click(function(e){
    e.preventDefault();
    $("#cd").mousemove(function(e){
        $("#text").css({ left: e.pageX-20, top: e.pageY-20 });
    });
    $("#text").css({ left: e.pageX-20, top: e.pageY-20}).show();
});