Как одолеть постоянное недовольство canvas?

162

23 марта 2017, 18:33

Нужно было выводить картинку и на ней текст. Ладно, 20 минут поиска и нужны код у меня, чуть-чуть его дорабатываем, даем картинку и все, отлично. Но мне нужна картинка меньшего размера и тут-то появились проблемы, он не хотел брать картинки меньшего размера(просто не выводил их), ладно, я уменьшил разрешение большого варианта самим canvas'ом и вроде было все отлично. Но при проверке оказалось что первый раз она загружает только текст, а если обновить страницу, то на 2 раз уже картинка и текст. Как можно это исправить? Чтобы с первого раза появлялся и текст, и картинка.

<!DOCTYPE html> 
<html> 
 
<head> 
  <style> 
    #ticket { 
      display: none; 
    } 
  </style> 
</head> 
 
<body> 
 
  <canvas id="myCanvas" width="350" height="200"> 
Обновите браузер</canvas> 
  <img id="photo" src="Golden-Ticket.jpg" style="display: none;" /> 
  <div id="ticket">1500</div>'; 
  <script> 
    var ticket = document.getElementById("ticket"); 
    var tekt = ticket.innerHTML; 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
 
    var img = document.getElementById("photo"); 
    ctx.drawImage(img, 0, 0, 347, 200); 
 
    ctx.font = "small-caps 40px Arial"; 
    ctx.textAlign = "center"; 
    ctx.strokeText(tekt, 160, 110); 
  </script> 
</body> 
 
</html>