JSFiddle - React, Tailwind, and code Playground

by _Pez

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<canvas id="1" class="aaa" width="300" height="200" style="margin-left: 20px; margin-top: 20px;border: solid 1px;"></canvas>

<div id="2" class="bbb" style="position: relative; left: 250px; top: 100px; width: 50px; height: 20px; border: solid 1px; background: #cccccc; text-align: center; overflow: hidden;">click</div>

<div id="output-image"></div>

<textarea id="output-text" style="margin-top:20px"></textarea>

JavaScript

var canvas=document.getElementById("1");
var ctx=canvas.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(30,25,100,50);
ctx.fillRect(160,70,100,50);


$('.bbb').click(function(e){
    var canvas = document.getElementById("1");
    var img    = canvas.toDataURL("image/png");
    $('#output-image').html('<img src="'+img+'"/>');
    $('#output-text').val(img);
});