Code does not display error message when user puts in an incorrect angle

Question

I'm making a projectile motion simulator and would like to display an error message when the user inputs an angle that isn't between 0 and 90 degrees, but the text never displays

var calculate = function() {        
    var velocity = parseFloat(ctx.getElementById('Velocity').value);
    var angle = parseFloat(ctx.getElementById('Angle').value);
    var initialHeight = parseFloat(ctx.getElementById('Height').value) || 0;
    var vertPlane = parseFloat(ctx.getElementById('Vertical').value);
    var landPlane =  parseFloat(ctx.getElementById('Final-Height').value) || 0;

    if (angle > 90 || angle < 0 || angle === undefined) {
        ctx.restore();
        ctx.save();
        ctx.fillStyle = 'red';
        ctx.fillText("Please pick an angle between 0 and 90 degrees", canvas.width / 2, canvas.height / 2);
        ctx.translate(0, canvas.height);
        ctx.scale(1, -1);

    }
}

The rest of the code can be found here https://jsfiddle.net/xk22k8s7/1/

Answer 1

注释是正确的，问题是我使用的是ctx.getElementById而不是document.getElementById因为这些输入字段不在上下文中，而是在文档中。