Почему не происходит отрисовка canvas в новом окне?

Question

[olkhovich]

Задание такое:
Нужно создать страничку, на которой вводятся тригонометрические значения с диапазоном и шагом. Дальше в новом окне должна отображаться таблица с этими значениями и график функции. График хочу нарисовать с помощью canvas. Пока сделал координатную плоскость.
Но почему не происходить отрисовка в новом окне? Что я сделал неправильно?

<h1> Тригонометрические функции </h1>
        <p> Функция <select name = "func">
            <option value = "choice"> Выбрать </option>
            <option value = "sin"> Синус </option>
            <option value = "cos"> Косинус </option>
            <option value = "tan"> Тангенс </option>
        </select>
        <h3> Введите диапозон углов в градусах </h3>
        <p> Начало <input type = "number" name = "start" onchange = "Numb(this)"> </p>
        <p> Конец <input type = "number" name = "finish" onchange = "Numb(this)"> </p>
        <p> Шаг <input type = "number" name = "step" onchange = "Numb(this)"> </p>
        <p> <input type = "submit" onclick = check() value = Вычислить> </p>

var context=document.all.surface.getContext("2d")
        function check() {
            func = document.all.func.value;
            start = document.all.start.value;
            finish = document.all.finish.value;
            step = document.all.step.value;
            if (func == "choice") { // не выбрана функция
                alert("Выберите функцию");
                func.focus();
                func.select();
            }
            else if (step == 0) { // шаг равен нулю
                alert("Введите верное значение");
                step.focus();
                step.select();
            }
            else if (start < 0 || finish < 0) { // начало или конец отрицательные
                alert("Введите неотрицательное число");
                start.focus();
                start.select();
            }
            else if (start < finish && step < 0) { // начало меньше конца при отрицательном шаге
                alert("Введите верное значение");
                start.focus();
                start.select();
            }
            else if (start > finish && step > 0) { // начало больше конца при положительном шаге
                alert("Введите верное значение");
                start.focus();
                start.select();
            }
            else Table(document.all.func.value,document.all.start.value,document.all.finish.value,document.all.step.value);
        }

        function Table(f,start,finish,step) {	
            var str="<table border=1 cellspacing=2><th colspan=2>Угол<th rowspan=2>"+f+"<tr><th>в градусах<th>в радианах";
            var str1 = `<canvas id=surface width=500 height=500 style="background-color: wheat";></canvas>`;
            a=parseInt(start);
            b=parseInt(finish);
            c=parseInt(step);
                while(a <= b) {
                    rad=a*(Math.PI/180);
                    znach=eval("Math."+f+"("+rad+")");
                    rad=rad.toFixed(4);
                    znach=znach.toFixed(4);
                    str0='<tr><td align="center">'+a+'<td align="center">'+rad+'<td align=center>'+znach+'';
                    str+=str0;
                    a+=c;
                }
                str+="</table>" + str1;
                newWindow(str);
                drawBack();
        }

        function newWindow(str) { 
            grWin=window.open("","","width=1080,height=720");
            grWin.document.write(str);
        }

        function drawBack() {
            for (i = 0; i < 500; i += 1)
            {
                context.moveTo(250, i)
                context.lineTo(250, i + 20) // oy
                context.moveTo(i, 250)
                context.lineTo(i + 20, 250) // ox
            }
                context.moveTo(250, 0)
                context.lineTo(240, 20)
                context.moveTo(250, 0)
                context.lineTo(260, 20)
                context.moveTo(480, 240)
                context.lineTo(500, 250)
                context.moveTo(500, 250)
                context.lineTo(480, 260)
                for (i = 50; i < 500; i += 50) {
                    context.moveTo(i, 235)
                    context.lineTo(i, 265)
                    context.moveTo(235, i)
                    context.lineTo(265, i)
                }
                context.strokeStyle="black" 
                context.stroke()

Answer 1

[Роман]

Вы не пробовали смотреть в консоль браузера на предмет выводимых ошибок?

TypeError: document.all.surface is undefined
ReferenceError: Numb is not defined
ReferenceError: check is not defined

Подготовьте ваш пример в песочнице, например https://jsfiddle.net/
Проверьте что в консоль не сыпятся ошибки.
Если сыпятся, то исправьте их.
Затем кидайте ссылку на песочницу сюда, будем смотреть и помогать)

Comments

[Роман]

вот ссылка на ваш пример в песочнице
https://jsfiddle.net/y9reL3cv/

исправьте ошибки (в частности создайте вашу функцию Numb - обработчик изменения полей формы), как только в консоли перестанут появляться ошибки, если пример не заработает - кидайте ссылку на исправленную версию в песочнице - посмотрим что там у вас не так.

[olkhovich]

Форму я убрал вообще, осталось

TypeError: document.all.surface is undefined

Ошибка пропадает при добавлении объекта canvas в любое место главного окна.
Видимо ошибка тут:

var str1 = `<canvas id="surface" width="500" height="500" style="background-color: wheat"/></canvas>`;

Как можно исправить?

[Роман]

olkhovich, причин неработоспособности несколько:

Первая в том, что на момент выполнения строчки
context=document.all.surface.getContext("2d");
в html еще не добавлен канвас с ID surface

Вторая в том, что document.all.surface ищет канвас в родительском окне а должно в созданном, то есть вам надо как то передать GtWin в то место где вы берете контекст от канваса.

вот пример где оба косяка уже исправлены, но глубоко в ваш код я не лез, так что оптимизировать вам прийдется самостоятельно.