Javascript Canvas не показывает изображение

Question

В настоящее время я работаю над проектом Jvascript Canvas (никогда не закодированным в Js или ранее используемом холсте) и вам нужна помощь в рисовании изображения с рамкой в ​​центре холста.

Я в настоящее время Person.js где прямоугольник и образ человека притягиваются:

var Person = (function() { 
function Person(pName, pImageUrl) { 
    this.setId(Person.sTotalNodes++); 
    this.setName(pName); 
    this.mImage = new Image(); 
    this.setImageUrl(pImageUrl); 
    this.mPartners = new Array(); 

} 
Person.sTotalNodes = 0; 
Person.prototype.getId = function() { 
    return this.mId; 
}; 
Person.prototype.setId = function (pId) { 
    this.mId = pId; 
}; 
Person.prototype.draw = function (context) { 

    //draw rectangle 
    var c = document.getElementById("canvas"); 
    context.translate(canvas.width * 0.5, canvas.height * 0.5); 
    var context = c.getContext("2d"); 
    context.rect(0,0,160,210); 
    context.fillStyle = '#0073E6'; 
    context.fill(); 
    context.stroke(); 
    //get image and draw 
    context.drawImage(this.getImage(), 0, 0); 

}; 
Person.prototype.setName = function (pName) { 
    this.mName = pName; 
}; 
Person.prototype.getName = function() { 
    return this.mName; 
}; 
Person.prototype.setImageUrl = function (pImageUrl) { 
    this.mImageUrl = pImageUrl; 
    this.mImage.src = pImageUrl; 
}; 
Person.prototype.getImageUrl = function() { 
    return this.mImageUrl; 
}; 
Person.prototype.getImage = function() { 
    /* when you first get this it will not return a proper image 
     you need to use the getImageUrl function and then build a new image */ 
    return this.mImage; 
}; 
Person.prototype.getPartner = function (pIndex) { 
    return this.mPartners[pIndex]; 
}; 
Person.prototype.numPartners = function() { 
    return this.mPartners.length; 
}; 
Person.prototype.addPartner = function (pPartner) { 
    this.mPartners.push(pPartner); 
}; 

return Person; 

})();

Но как только я добавляю context.translate(canvas.width * 0.5, canvas.height * 0.5); , чтобы разместить начало координат в центре моего холста, только рисовал прямоугольник? Я что, миссия? (Также попытался размещение context.translate в моем main.js где topPerson.draw(context); призвано привлечь первый человек из дерева.

main.js (где я называю первый человек из дерева, который можно сделать)

// add the onLoad event listener to initialise our canvas 
if(window.addEventListener) { 
window.addEventListener('load', onLoad, true); 
} 

function onLoad() { 
var canvas; 
var context; 
var exampleFamilyTrees; 
var topPerson; 

var previousMousePosition; 

function initialise() { 
    canvas = document.getElementById('canvas'); 
    if (!canvas) { 
     alert('Error: Canvas element not found'); 
     return; 
    } 

    context = canvas.getContext('2d'); 
    if (!context) { 
     alert('Error: Unable to get canvas context'); 
     return; 
    } 
    exampleFamilyTrees = new ExampleFamilyTrees(); 
    topPerson = exampleFamilyTrees.getFamilyTree(0); 


} 
function draw(){ 
    context.translate(canvas.width * 0.5, canvas.height * 0.5); 
    topPerson.draw(context); 

} 

function update(){ 

} 

function animationLoop(){ 
    update(); 
    draw(); 
    requestAnimationFrame(animationLoop); 
} 
initialise(); 
animationLoop(); 
} 

Answer 1

Вы должны поместить translate еще до того, context.rect