Почему этот вызов функции терпит неудачу?

Question

Вопрос новичка ... Это прекрасно работает:

function draw() {
    var drawingCanvas = document.getElementById('myDrawing');
    // Check the element is in the DOM and the browser supports canvas
    if(drawingCanvas && drawingCanvas.getContext) {
        // Initaliase a 2-dimensional drawing context
        var context = drawingCanvas.getContext('2d');
        context.strokeStyle = "#000000";
        context.fillStyle = "#FFFF00";
        context.beginPath();
        context.arc(100,100,50,0,Math.PI*2,true);
        context.closePath();
        context.stroke();
        context.fill();
    }
}

Но это ничего не отображает:

    function draw() {
    var drawingCanvas = document.getElementById('myDrawing');
    // Check the element is in the DOM and the browser supports canvas
    if(drawingCanvas && drawingCanvas.getContext) {
        // Initaliase a 2-dimensional drawing context
        var context = drawingCanvas.getContext('2d');
        drawface();
    }
}   

    function drawface() {
        context.strokeStyle = "#000000";
        context.fillStyle = "#FFFF00";
        context.beginPath();
        context.arc(100,100,50,0,Math.PI*2,true);
        context.closePath();
        context.stroke();
        context.fill();
    }

Что я пропустил?

Спасибоочень много всего ниже за ваши ответы - и ваше терпение с этой глупой ошибкой!

Answer 1

context определяется в функции draw. drawface не получает ссылку. Либо передайте его в функцию, либо объявите его вне области действия функции.

var context = blah;

function draw(){};
function drawface(){};

альтернативный способ:

function drawface(context) {
    context.blah = foo;
}

также убедитесь, что этот код выполняется после того, как DOM ready или сценарий находится перед тегом end body.

Answer 2

context в функции draw ограничена областью действия для функции draw и не совпадает с глобальной ссылкой на context в drawface.

.определяя его вне розыгрыша, должно сработать ::

var context;

function draw() {
    var drawingCanvas = document.getElementById('myDrawing');
    // Check the element is in the DOM and the browser supports canvas
    if(drawingCanvas && drawingCanvas.getContext) {
        // Initaliase a 2-dimensional drawing context
        context = drawingCanvas.getContext('2d');
        drawface();
    }
}   

    function drawface() {
        context.strokeStyle = "#000000";
        context.fillStyle = "#FFFF00";
        context.beginPath();
        context.arc(100,100,50,0,Math.PI*2,true);
        context.closePath();
        context.stroke();
        context.fill();
    }

Answer 3

Вам необходимо передать контекст в функцию drawface.

function draw() {
    var drawingCanvas = document.getElementById('myDrawing');
    // Check the element is in the DOM and the browser supports canvas
    if(drawingCanvas && drawingCanvas.getContext) {
        // Initaliase a 2-dimensional drawing context
        var context = drawingCanvas.getContext('2d');
        drawface(context);
    }
}   
function drawface(context) {
    context.strokeStyle = "#000000";
    context.fillStyle = "#FFFF00";
    context.beginPath();
    context.arc(100,100,50,0,Math.PI*2,true);
    context.closePath();
    context.stroke();
    context.fill();
}

Answer 4

Вы объявляете context локально:

var context = drawingCanvas.getContext('2d');

Это не отображается в вашей функции drawface, вам нужно передать ее в качестве параметра:

 var context = drawingCanvas.getContext('2d');
 drawface(context);


function drawface(context) {
    context.strokeStyle = "#000000";
    context.fillStyle = "#FFFF00";
    ...

ВыВозможно, вы захотите немного прочитать об этом в MDC:
var Statement
Функции и область действия