JSFiddle - React, Tailwind, and code Playground

by oscard

HTML

<div id="textEdit" contenteditable="true"></div>
<button id="btn">Click</button>
<button id="clr">Clear</button>
<br>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3; padding : 0; ">Your browser does not support the HTML5 canvas tag.</canvas>

CSS

#textEdit {
    border:1px solid #ccc;
    font-size:30px;
    min-height:50px;
    width:300px;
    margin-bottom: 5px;
}
button {
    margin-bottom: 5px;
}

JavaScript

/***************************
 ****** draw on canvas *****
 ****************************/
function getText() {
    var txt = document.getElementById("textEdit").innerHTML;
    return txt;
    //alert();
}

function createCanvas() {
    var txt = getText();
    var cnvs = document.createElement("canvas");
    var cntx = cnvs.getContext("2d");
    cntx.font = "20px Arial";
    var ms = cntx.measureText(txt).width;
    cntx.fillText(txt, 5, 20);
    cntx.fillText("width:" + cntx.measureText(txt).width,5,45);
    //cntx.rect(2,2,250,100);
    //cntx.stroke();
    cntx.strokeRect(2, 2, ms, 100);
    return cnvs;
}

function drawOnCanvas() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.drawImage(createCanvas(), 0, 0,150,100);
    var txt = getText();
    //var res = txt.split("");
    //alert(txt[2]);
}

function clearCanvas(){
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.clearRect(0, 0, c.width, c.height);
}

//add events
var btn = document.getElementById("btn");
var clr = document.getElementById("clr");

btn.onmousedown = drawOnCanvas;
clr.onmousedown = clearCanvas;