Estou a trabalhar numa aplicação web que tem uma framework, esta framework foi desenvolvida em ASP.net, sendo que nela posso adicionar javascript aos ecrãs. Num dos ecrãs adicionei uma assinatura digital, em que escreve num quadro "canvas" á medida que detecta eventos dos ratos ou do touch, de seguida guardo os dados na base de dados.
Este javascript executa um onload dentro de um onready fazendo um appendChild a um elemento do ecrã de origem. Desta forma adiciono a minha assinatura digital ao ecrã original.
A minha assinatura digital é um Canvas 2d responsivo. Com o canvas responsivo, é necessário ter um backup do canvas sempre que este recebe alterações nas dimensões, porque sempre que as dimensões do canvas são alteradas todo o seu conteudo é limpo. Desta forma, adicionei um evento window.onresize que desenha o meu backup no canvas, após fazer set da width e da height.
Na próxima secção desta pergunta, deixarei a negrito análises do ponto de vista do programador, em bold normal análises do ponto de vista do utilizador.
O utilizador carrega a página, são disparados onready, onload, dentro do onload adiciono elementos ao DOM
var stringAssina = "<canvas id="quadro" style="display:block;overflow: hidden;width: calc(100% - 10px);height:400px;border:1px solid"></canvas>";
jQuery(document).ready(function() {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(function () {
jQuery(stringAssina).insertAfter("#ctl00_conteudo_pbDadosMB");
// recarrega canvas com dimensões da janela
window.onresize = function(event) {
var quadro = document.getElementById('quadro');
quadro.width = quadro.clientWidth;
quadro.height = quadro.clientHeight;
console.log('resize');
var img = new Image;
img.onload = function() {
var ctx = quadro.getContext("2d");
ctx.drawImage(img, 0, 0, quadro.clientWidth, quadro.clientHeight);
};
img.src = dataURL;
Neste momento o utilizador com os eventos do rato ou touch, ao tentar escrever no canvas. Estará a escrever em sitios que não correspondem ás coordenadas dos rato. Isto porque o canvas.width e canvas.height são undifined. Para resolver este problema ainda no onload, preciso fazer set no canvas.width e canvas.height, desta forma estaremos a escrever nos sítios certos. Por isso, ainda no onload tenho
var img = new Image;
var quadro = document.getElementById('quadro');
console.log(quadro.clientWidth);
quadro.width = quadro.offsetWidth;
quadro.height = quadro.offsetHeight;
var img = new Image;
img.onload = function() {
var ctx = quadro.getContext("2d");
ctx.drawImage(img, 0, 0, quadro.offsetWidth, quadro.offsetHeight);
};
img.src = dataURL;
Este código faz set das dimensões do canvas para 0. Ou seja o quadro.offsetWidth and quandro.offsetHeight são 0.
Conclusão: O meu código funciona a partir do momento que faço um reajuste na janela. O canvas offsetWidth and offsetHeight estão a 0.
Nota: ao código citado não foram adicionados os eventos de escrita no canvas, estes eventos existem dentro do onload.
[UPDATE - 11-06-2019 14:18]
Passei a fazer o insertAfter dentro do ready. O clientWidth e o offsetWidth do canvas, continuam a ser 0 na primeira ocorrencia do onload. Consegui resolver indo buscar a largura do pai, no entanto eticamente não é eficiente, porque deveria ser possível buscar a largura do canvas no primeiro onload.