Synchronization of events in javascript

Question

I am working on a web application that has a framework, this framework was developed in ASP.net, where I can add javascript to the screens. On one of the screens I added a digital signature, in which you write to a "canvas" frame as you detect mouse or touch events, then store the data in the database.

This javascript executes an onload inside an onready by appendchild an element of the source screen. This way I add my digital signature to the original screen.

My digital signature is a responsive Canvas 2d. With the responsive canvas, you need to have a backup of the canvas whenever it receives changes in dimensions, because whenever the canvas dimensions are changed all its contents are cleaned. In this way, I added a window.onresize event that draws my backup on canvas, after setting width and height.

In the next section of this question, I will leave the bold analysis from the programmer’s point of view, in standard Bold user-side analysis.

The user loads the page, are fired onready, onload, within the onload add elements to the 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;

At this time the user with the mouse or touch events, when trying to write to the canvas. You will be writing in places that do not match the mouse coordinates. This is because canvas.width and canvas.height are undifined. To solve this problem still in onload, I need to set in canvas.width and canvas.height, this way we will be writing in the right places. So still on onload I have

          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;

This code sets the canvas dimensions to 0. That is to say the frame.offsetWidth and quandro.offsetHeight are 0.

Completion: My code works from the moment I reset the window. The offsetWidth and offsetHeight canvas are 0.

Note: The above code did not add the writing events to the canvas, these events exist within onload.

[UPDATE - 11-06-2019 14:18]

I started doing the insertAfter inside the ready. The clientWidth and the canvas offsetWidth, continue to be 0 in the first occurrence of onload. I was able to solve by going to fetch the width of the parent, however ethically it is not efficient, because it should be possible to search the width of the canvas in the first onload.

Answer 1

To add elements to the DOM you should do it in ready, because onload only happens after all the DOM and content (images, etc.) are loaded. Manipulation of the elements you add should happen after you ensure they already exist or in subsequent events, such as onload.

And note that you may have a difference in canvas size as you are trying to get two of its size through different properties.

clientWidth is the Inner width (ie. the space Inside an element including padding but excluding Borders and scrollbars)
offsetWidth is the Outer width (ie. the space occupied by the element, including padding and Borders) scrollWidth is the total width including Stuff that is only Visible if you scroll

If necessary create a Jsfiddle so we can help you better.