JSFiddle - React, Tailwind, and code Playground

by sinechris

HTML

<canvas id="keytagCanvas" width="320" height="137"></canvas>

<input type="range" class="vertical" name="vertical" min="-137" max="137">
<img id="keytagImg" src="http://f.cl.ly/items/3S3K0R0Q20012r1A0I0B/BROOKLYN_crimson.jpeg" alt="">
<br>
<input type="range" name="horizontal" min="-320" max="320">
<br>    
<input type="text" id="customtext" maxlength=9 placeholder="Enter text here">
    (9 Characters Max)

CSS

body {
    font: 20px Helevetica, sanserif;
}
canvas#keytagCanvas {
    outline: 1px solid grey;
}
img#keytagImg { 
    display: none; 
}
input#customtext { 
    font-size: 20px; 
}

input[type=range] {
    width: 320px;
}

input[type=range].vertical {
    -webkit-appearance: slider-vertical;
    width: 20px;
    height: 137px;
}

JavaScript

var canvas = document.getElementById('keytagCanvas'),
    ctx = canvas.getContext('2d');

function Img() {
    this.x = 0;
    this.y = 0;
    this.element = document.getElementById('keytagImg');
}

var img = new Img();

function draw(txt){
    ctx.clearRect(0,0,canvas.width, canvas.height);
    ctx.drawImage(img.element,img.x,img.y);
    //ctx.fillStyle = "#ce0b00";
    //ctx.fillRect(40,40,150,50);
    ctx.fillStyle = "white";
    ctx.font = "30px sans-serif";
    ctx.fillText(txt, 42, 80);
}

draw(''); // Initial Text

$('input#customtext')
    .focus()
    .on('keyup', function(){
        var text = $(this).val();
        draw(text);
    });

$('input[type=range]').on('change', function(){
 var val = parseInt($(this).val(), 10),
     name = $(this).attr('name');
 if (name === 'vertical'){
     img.y = -val;
 } else {
     img.x = val;
 }
 draw('');
});