JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<img id="myImg" src="" alt="image from canvas" />

CSS

body {
    font-family: Helvetica, sans-serif;
    padding: 2em;
}
canvas {
    border: 2em solid gold;
    border-radius: 50%;
}
html {
    background: white;
}

JavaScript

function getdataimg(URL) {
    var img = new Image(),
        src = URL,
        cvs = document.createElement('canvas'),
        ctx = cvs.getContext('2d');
    cvs.width = 800;
    cvs.height = 800;
    img.crossOrigin = "Anonymous";
    img.onload = function () {
        ctx.drawImage(img, 0, 0);
        var dataURL = cvs.toDataURL("image/png");
        var imgTag = new Image();
        console.log(imgTag);
        imgTag.src = dataURL;
        console.log(dataURL);
        return dataURL;
    }
    img.src = src;
}
getdataimg('http://i.imgur.com/RS8t6Dy.png');