JSFiddle - React, Tailwind, and code Playground

by John kuoppala

HTML

<canvas id="canvas"></canvas><br />
<input type="text" name="url-pass" id = "url-pass"></input>
<button type="button" onclick = "Draw_url_to_canvas(document.getElementById('url-pass').value,'canvas')">Pass url-photo to canvas</button>

JavaScript

function Draw_url_to_canvas(url1,name_of_canvas){
    var myCanvas = document.getElementById(name_of_canvas);
    var img3 = new Image;
    var ctx2 = myCanvas.getContext('2d');
    img3.onload = function(){
        ctx2.drawImage(img3,0,0); // Or at whatever offset you like
    }
    console.log(url1);
    img3.src = url1;
}