HTML5 Canvas drawImage TideSDK

Question

Я создаю приложение и упаковку HTML5 с TideSDK. Я пытаюсь получить изображение для отображения на холсте; как бы ни старался, ничего не появляется. Я указал проблему на размещение файла изображения в каталоге (я запустил один и тот же код в jsFiddle с изображением из Интернета, и все было в порядке), так что есть конкретное место, где я должен размещать свои изображения так TideSDK может найти его? Благодаря!

$(document).ready(function() { 
    var canvas = $("#game"); 
    var context = $("#game")[0].getContext("2d"); 
    context.font="18px OpenSans"; 
    var backImage = new Image(); 
    backImage.src="../images/homeBackground.jpg"; 
    homeScreen(); 

    function homeScreen() 
    {  
     context.drawImage(backImage, 0, 0);  
    } 
}); 

Каталог файлов:

CGS 
| 
Resources 
    | 
    css 
    fonts 
    images 
     | 
      homeBackground.jpg 
    js 
    | 
      game.js (where the above code is located) 
      jquery.js 
    index.html 
    Dist 

Answer 1

У вас не хватает двух вещей.

1. Не забудьте установить width и height атрибуты canvas
2. Дождитесь загрузки изображения после того, как вы установите src атрибут

Вот проверенная, работает JS образец кода :

$(document).ready(function() { 
    var canvas = $("#game"); 
    var context = canvas[0].getContext("2d"); 
    context.font="18px OpenSans"; 
    var backImage = new Image(); 
    backImage.onload = function() { 
     homeScreen(); 
    }; 
    backImage.src="../images/homeBackground.jpg"; 

    function homeScreen() 
    {  
     context.drawImage(backImage, 0, 0);  
    } 
}); 

и не забудьте установить width и height от canvas:

<canvas id="game" width="500" height="500"></canvas>