JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="drawhere_cicles3" width="300" height="300"></canvas>
<script src='http://greenethumb.com/canvas/circles/circles3.js'></script>
<input type="submit" id="savepng" value="Save" />
JavaScript
var canvas = document.getElementById("drawhere_cicles3");
$("savepng").onclick = function() {
var cs = new CanvasSaver('http://greenethumb.com/canvas/lib/saveme.php');
cs.savePNG(canvas, 'image');
function CanvasSaver(url) {
this.url = url;
this.savePNG = function(cnvs, fname) {
if(!cnvs || !url) return;
fname = fname || 'picture';
var data = cnvs.toDataURL("image/jpeg");
data = data.substr(data.indexOf(',') + 1).toString();
var dataInput = document.createElement("input") ;
dataInput.setAttribute("name", 'imgdata') ;
dataInput.setAttribute("value", data);
var nameInput = document.createElement("input") ;
nameInput.setAttribute("name", 'name') ;
nameInput.setAttribute("value", fname + '.jpeg');
var myForm = document.createElement("form");
myForm.method = 'post';
myForm.action = url;
myForm.appendChild(dataInput);
myForm.appendChild(nameInput);
document.body.appendChild(myForm) ;
myForm.submit() ;
document.body.removeChild(myForm) ;
};
}
}