Why does this function call fail?

Newbie question... This works fine:

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();
    }
}

But this doesn't display anything:

    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();
    }

What have I missed?

Tha开发者_开发知识库nks very much all below for your answers - and your patience with this silly error!

context is defined within the draw function. drawface does not get the reference. Either pass it in the function, or declare it outside of the function scope.

var context = blah;

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

alternative way:

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

also, make sure this code executes after DOM ready or script is before end body tag.

You're declaring context locally:

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

It's not visible in your drawface function, you need to pass it as a parameter:

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


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

You may want to read a bit about that at MDC:
var Statement
Functions and Scope

You need to pass context into the drawface function.

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();
}

context within the draw function is limited in scope to the draw function and is not the same as the global reference to context in drawface.

Making context global by defining it outside of draw, should work::

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();
    }