Olá, humanos.
Estou ganhando suór de tanto tentar resolver esse erro que estou passando desde horas.
Normalmente, pela primeira, eu resolvi fazer uma função que renderiza imagem por URL específica em argumento, qual ao ser carregada vai realizar o desenho da imagem do URL na função e uma função especificada no argumento da mesma (isso no canvas).
O erro começou desde que eu mudei uma array, e que algumas ações seriam realizadas depois que essas imagens (da função) serem carregadas.
Como não estou conseguindo resolver, eu quero uma ajuda de profissionais.
Eu quero saber o que estou fazendo errado, até porque dêei uma longa revisão na mesma linha;
Vou deixar o código abaixo, e desculpe, não tenho mais a parte antiga da linha de código.
$RENDER_IMG - uma função para renderizar imagens no canvas por especificar URL, x, y e função de quando a imagem está carregada:
function $RENDER_IMG(url,x,y,fu){var _imgAdd=new Image();_imgAdd.onload=function(){_stg.drawImage(_imgAdd,x,y);fu();};_imgAdd.src=url;}
Variáveis de layout - onde estão funções em arrays com ações importantes, e, provavelmente, onde está o erro.
_layouts_function=[function(){}, function(){_canvas=document.getElementById('canvas');document.getElementById('playerNameLogin').style.top=(parseInt(_canvas.offsetTop)+215)+'px';document.getElementById('playerNameLogin').style.left=(parseInt(_canvas.offsetLeft)+90)+'px';document.getElementById('playerPwLogin').style.top=(parseInt(_canvas.offsetTop)+255)+'px';document.getElementById('playerPwLogin').style.left=(parseInt(_canvas.offsetLeft)+90)+'px';document.getElementById('playerSignInBtn').style.top=(parseInt(_canvas.offsetTop)+305)+'px';document.getElementById('playerSignInBtn').style.left=(parseInt(_canvas.offsetLeft)+70)+'px';} ],_layouts_graphics_u=[function(){}, [function(){document.getElementById('katze-canvas-stg').innerHTML+="<input type='text' class='login-txt-box' id='playerNameLogin' onchange=\"chars_block(this)\" onkeyup=\"chars_block(this)\" maxlength='13' placeholder='Player name'><input type='password' maxlength='25' class='login-txt-box' id='playerPwLogin' placeholder='Password'><input type='button' class='login-submit' id='playerSignInBtn' value='Sign in'>";_stg=canvas.getContext('2d');$RENDER_IMG('wallpapers/theMaskKatze.png',0,0,fu1);function fu1(){$RENDER_IMG('http://i.imgur.com/bW0nslI.png',70,50,fu2);}function fu2(){$_RECT('rgba(0,0,0,0.35)',78,208,188,175);$_RECT('#0D1C35',70,200,188,175);document.getElementById('playerSignInBtn').addEventListener('click',function(){sign_in_functions_a.check(document.getElementById('playerNameLogin').value,document.getElementById('playerPwLogin').value);});}, function(){_canvas=document.getElementById('canvas');stg=_canvas.getContext('2d');$_RECT("#61afe6",0,0,750,600);$_RECT('rgba(0,0,0,0.35)',78,208,188,175);$_RECT('#244155',70,200,188,175);_stg.drawImage(_1katze_logo,70,50);}] ]
O código está um pouco complexo, eu sei.
Ainda pretendo dar um ajuste, mas se preferir, eu deixei as mesmas linhas que uma ferramenta formatou:
_layouts_function = [function() {}, function() { _canvas = document.getElementById('canvas'); document.getElementById('playerNameLogin').style.top = (parseInt(_canvas.offsetTop) + 215) + 'px'; document.getElementById('playerNameLogin').style.left = (parseInt(_canvas.offsetLeft) + 90) + 'px'; document.getElementById('playerPwLogin').style.top = (parseInt(_canvas.offsetTop) + 255) + 'px'; document.getElementById('playerPwLogin').style.left = (parseInt(_canvas.offsetLeft) + 90) + 'px'; document.getElementById('playerSignInBtn').style.top = (parseInt(_canvas.offsetTop) + 305) + 'px'; document.getElementById('playerSignInBtn').style.left = (parseInt(_canvas.offsetLeft) + 70) + 'px'; } ], _layouts_graphics_u = [function() {}, [function() { document.getElementById('katze-canvas-stg').innerHTML += "<input type='text' class='login-txt-box' id='playerNameLogin' onchange=\"chars_block(this)\" onkeyup=\"chars_block(this)\" maxlength='13' placeholder='Player name'><input type='password' maxlength='25' class='login-txt-box' id='playerPwLogin' placeholder='Password'><input type='button' class='login-submit' id='playerSignInBtn' value='Sign in'>"; _stg = canvas.getContext('2d'); $RENDER_IMG('wallpapers/theMaskKatze.png', 0, 0, fu1); function fu1() { $RENDER_IMG('http://i.imgur.com/bW0nslI.png', 70, 50, fu2); } function fu2() { $_RECT('rgba(0,0,0,0.35)', 78, 208, 188, 175); $_RECT('#0D1C35', 70, 200, 188, 175); document.getElementById('playerSignInBtn').addEventListener('click', function() { sign_in_functions_a.check(document.getElementById('playerNameLogin').value, document.getElementById('playerPwLogin').value); }); }, function() { _canvas = document.getElementById('canvas'); stg = _canvas.getContext('2d'); $_RECT("#61afe6", 0, 0, 750, 600); $_RECT('rgba(0,0,0,0.35)', 78, 208, 188, 175); $_RECT('#244155', 70, 200, 188, 175); _stg.drawImage(_1katze_logo, 70, 50); } ] ]