Отлично Загрузить изображение в HTML Canvas

Question

У меня есть этот код, чтобы загрузить изображение в HTML-холст:

<div class="col-md-6 col-md-offset-3 text-center" style="padding: 20px;"> 
    <canvas id="canvas"> 
     bad browser. canvas is not supported. 
    </canvas> 
    <img id="canvasimg" src="kindle.jpg" style="display:none;"/> 
</div> 

<script> 
    var canvas = document.getElementById('canvas'); 
    ctx = canvas.getContext('2d'); 

    var deviceWidth = window.innerWidth;; 

    canvasWidth = 300; 
    canvasHeight = 300; 

    canvas.width = canvasWidth; 
    canvas.height = canvasHeight; 

    var img = document.getElementById('canvasimg'); 
    imgx = canvas.width/2 - img.width/2; 
    imgy = canvas.height/2 - img.height/2; 

    function runLoop(){    
     ctx.lineWidth = 8; 
     ctx.font = '20pt Lato'; 
     ctx.strokeStyle = 'black'; 
     ctx.fillStyle = 'white'; 
     ctx.textAlign = 'center'; 
     ctx.lineJoin = 'round'; 

     var text1 = document.getElementById('canvastext-top').value; 
     //text1 = text1.toUpperCase(); 

     var text2 = document.getElementById('canvastext-bottom').value; 
     //text2 = text2.toUpperCase(); 

     x = canvas.width/2; 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     ctx.drawImage(img, imgx, imgy); 

     ctx.strokeText(text1, x, 60); 
     ctx.fillText(text1, x, 60); 

     ctx.strokeText(text2, x, 270); 
     ctx.fillText(text2, x, 270); 

     window.setTimeout(runLoop, 14); 
    }; 
    runLoop(); 


    var download = document.getElementById('img-download'); 
    download.addEventListener('click', prepareDownload, false); 

    function prepareDownload() { 
     var data = canvas.toDataURL(); 
     download.href = data; 
    } 

</script> 

сейчас, вот так ... когда я открываю эту страницу в первый раз, изображение не правильно загружен. Это выглядит следующим образом:

, но когда я попытался обновить или открыть ту же страницу на второй раз, он отлично загружен:

Answer 1

заменить ctx.drawImage(img, imgx, imgy) на ctx.drawImage(img, 0, 0)

x и y не относятся к центру изображения, а к верхнему левому углу.