Проблема с отрисовкой в canvas на IPhone

Question

Недавно столкнулся с очень интересной проблемой при попытке нарисовать сетку через canvas . Код:

var scanv = document.getElementById('scanv');
    scanv.width = 9000;
    scanv.height = 9000;
   
    var sctx = scanv.getContext('2d');
   
    for (var xl = 0; xl < 9000; xl += 30) {
        sctx.moveTo(xl, 0);
        sctx.lineTo(xl, 9000);
    }

    for (var yl = 0; yl < 9000; yl += 30) {
        sctx.moveTo(0, yl);
        sctx.lineTo(9000, yl);
    }

    sctx.strokeStyle = "#a9203e";
    sctx.stroke();

после выполнения данного кода на устройствах под Android и Windows как и должно отображается сетка, но на IPhone все получается иначе, браузер выдает следующую ошибку: TypeError: null is not an object (evaluating 'sctx.moveTo') никак не могу понять в чем дело, не могли бы вы мне помочь с этим?

Answer 1

Решение проблемы: Дело в том, что моя программа пыталась использовать scanv.getContext('2d'); еще до окончательной прогрузки canvas c id "scanv" что приводило к проблемам, но при этом у меня все было обернуто в window.onload, но это не помешало ошибке появиться. Для решения проблемы я использовал следующий костыль:

    var scanv = 0; 
    var scanvx; 
    checkM() 
    function checkM(){
      if(scanv){ 
       scanvx = scanv.getContext('2d');
      }else{
       scanv = document.getElementById('scanv');
       checkM();   
      }
    }

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

БЛОГ НА HUSL

Проблема с отрисовкой в canvas на IPhone

Ответы (1 шт):