Scrolling text on HTML5 Canvas - Which method to use?

[vgs2012]

Hi.

I have tried four methods, but are uncertain the method I prefer is in line with HTML. There may be better ways I do not know about. Please advice.

Method 1: As in the book "Beginning Adobe Animate CC. Static text inside a MovieClip, a mask layer and two arrow buttons which move the  MovieClip. It works, but it is a lot of work and I miss the scrollbar.

Method 2: Use the Label component with CSS and configure height and overflow (auto) (as well  as size, color, padding, border and so on). I like the way it works and I prefer this method. However, it comes out as a <label> element on the html page, and when I read about the label element I become uncertain whether I misuse it for wrong purposes.

Method 3: Use the jquery append a textarea to the the dom_overlay_container:

$('#dom_overlay_container').append('<textarea id="ta" readonly rows="4" cols="20">');

$('#dom_overlay_container').append('</textarea>');

$('#ta').val("Your text here...\nNext line or let it be wrapped.");

$('#ta').css("pointer-events", "all"); // to get the scrollbar to respond

Method 4: Use the jquery append a paragraph the dom_overlay_container:

$('#dom_overlay_container').append('<p id="p1">'); // if I add a '</p>', I get  two paragraphs

$('#p1').html("Your text here...<br>Next line or let it be wrapped.");

$('#p1').css({ "height" : "100px", "overflow" : "auto","pointer-events": "all"}); // plus width, border, padding and so on.

So which method should I use, or do you have a better alternative?

Best regards,

Ola Lie

[ClayUUID · Accepted solution]

First, requiring the entire jQuery library for something as trivial as adding DOM elements would be an absurd waste of bandwidth.

Second, both textarea and paragraph are bad choices because neither of those elements can be absolutely positioned.

Just paste in this code, which creates global functions for adding and removing DIV layers floated over the canvas.

// Create a DIV layer above the canvas

// Accepts ID, X, Y, width, height, HTML content, and CSS styling (optional)

// CSS styling is a CSS-formatted literal string

mkDiv = function(id, x, y, w, h, html, css) {

    var d = document.createElement("div");

    d.id = id;

    d.style.cssText = "position:absolute; left:" + x + "px; top:" + y + "px; width:" + w + "px; height:" + h + "px; overflow:auto;" + (css ? css : "");

    d.innerHTML = html;

    canvas.parentNode.appendChild(d);

}

// Remove an element by ID name

rmDiv = function(id) {

    try {

        var elem = document.getElementById(id);

        elem.parentNode.removeChild(elem);

    }

    catch(e) {}

}

mkDiv("mydiv", 0, 0, 500, 100, "This is a test", "color:red");

[vgs2012]

Thanks,

Your method works better than mine. I added className to the parameters so I also could use a css file. I called mkDiv from inside an init  function and it did not work; I had to change the defintion to function mkDiv(...

A question: As soon as we use components,e.g. aabutto, jquery is loaded, anyway, so do you avoid using components?

Best regards

[ClayUUID]

JavaScript executes in the order it's called. If you tried to call mkDiv before it was declared, that's a flaw in your code. By changing to a function declaration instead of a function expression, the function will no longer be globally available (assuming your code is in Animate and not an external file).

I don't use components because they don't do what I need, and because they don't scale with the stage, and because they're nothing more than thin wrappers around standard HTML elements. The only advantage components have is that their visibility can be managed with the timeline instead of in code.