High CPU load with "fillText"

[jvondrus]

Hello to all,
I'm working on my touch screen project on Raspberry Pi with framebuffer at console. It works very well but it has high CPU load.
All my graphic (some PNG import, come Rect and some Circle) take around 20% od CPU, but CPU load come to 80% when I add just 1 line of text with Openvg-canvas. And to full load with more than 5 text field.

Here is part of my code with text print:

// Inicialize
var fs                  = require ('fs');
var frame                   = require ('./node_modules/openvg-canvas/lib/util.js');
var Canvas              = require ('./node_modules/openvg-canvas/lib/canvas.js');
var canvas              = new Canvas(800, 600);
var ctx                 = canvas.getContext('2d');

// Load Background image
imgBck.src      = fs.readFileSync ('background.png');
imgFieldG.src       = fs.readFileSync ('field.png');

// Set text alling
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// Start main loop
frame.animate (function (time) {
    oneFrame ();
});


// MAIN FRAME
function oneFrame ()
{
    // Draw background image
    ctx.drawImage (imgBck,      0, 0);

    // Draw image
    ctx.drawImage (imgFieldG, 50, 50);

    // Field name
    ctx.font = 'normal 24px Impact, serif';
    ctx.fillText ("Text field 1",100, 100);
    ctx.fillText ("Text field 2", 100, 200);
    ctx.fillText ("Text field 3", 100, 300);
    ctx.fillText ("Text field 4", 100, 400);
}

What is wrong with text rendering than CPU load going so high?

[eendeego]

Hi @jvondrus, thank you for reporting this.

The problem is this: node-openvg-canvas does not use OpenVG APIs for text rendering (at the time I couldn't figure out how to load the fonts properly into it.)

(Without pursuing much more investigation...)

What's happening is that for each string you are displaying a new path is being constructed by concatenating paths of all the characters. This is 50/50 CPU/GPU work, but the CPU part itself is so slow/heavy that it undermines all the rest.

While I don't find out how to use the text APIs, here are somethings you can do to mitigate this:

1. Reduce as much as possible usage of the text API's (this sounds asshole-ish but sometimes it's possible.)
2. Are your text strings always the same ? If so, create a path for each: drawing paths on these APIs is extremely fast, so this can work.
3. (Depends a lot on your project) Does it make any sense to cache the text as images ? May be a good solution.

[jvondrus]

Hello.
thank you for explanation.

1. I have to use text fields, but I can try to use another node modules for it, do you know some another for shot text at framebuffer graphic?

2,3) I'm using 9 text fields, 5 of these are changing maybe one per day. If there is any way, how to cache it, it would be nice. Other 4 fields are fields with increasing numbers with user interacting.

[eendeego]

So, go for 2: For each string create a Path and add the text to it (look at the examples for this).

Rendering the paths later on is really fast, so I think you'll be good.

[jvondrus]

Thank you very much, I will look to examples how to "Patch it" :)

[jvondrus]

Please, can you help me add text to Path and next draw it? :D
I don't know what exactly separate from examples.

Font: 'normal 10px Impact, serif'
Color: '#000000'
Position: X = 100, Y = 200
textAlign = 'center'
textBaseline = 'middle'
Text: 'Example'

Thank you very much.