Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

High CPU load with "fillText" #21

Open
jvondrus opened this issue Oct 13, 2014 · 5 comments
Open

High CPU load with "fillText" #21

jvondrus opened this issue Oct 13, 2014 · 5 comments

Comments

@jvondrus
Copy link

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
Copy link
Owner

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
Copy link
Author

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
Copy link
Owner

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
Copy link
Author

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

@jvondrus
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants