Image to Canvas

by Blueprinter

HTML

<button onmouseup="fncDrawNewImage()">Put Image Into Canvas</button>
<span style='color:red'>NOTE: Large Image.  Scroll Down to see New Image<span>
    <br/>
    <br>
<img id='rawUploadImg' src="https://c63b5816896b8b38120d71a4eb99978894a5ef14.googledrive.com/host/0B52YKjuEE44ySkhPUTBsbW5sSWM/F28_003537_KPQQAPSQQQQQT0Bw_A.JPG">
<canvas id="cnvsForFormat" width="400" height="226"></canvas>

JavaScript

window.fncDrawNewImage = function () {
    window.img = document.getElementById("rawUploadImg");
    var cnvs = document.getElementById("cnvsForFormat");
    var ctx = cnvs.getContext("2d");
    cnvs.style.border = "1px solid #c3c3c3";
    ctx.drawImage(img, 0, 0, 400, 226);
};