[wpe-2.28] Canvas 2D Graphics Memory leak for very simple demo

[laurence-ejraee]

Hi, I've created this simple demo and when testing the graphics memory increases and is never released.
For the image I just downloaded a 1920x1080 image from: https://picsum.photos/1920/1080

To test Press the Left key to draw the image, then press Enter key to remove the canvas/drawing.
When removed the graphics memory is not released, and doing Left, Enter combo repeatedly leads to graphics memory exhaustion.

Is there something else I need to do to release the canvas memory in webkit? Or is this a webkit bug? Maybe this is fixed on newer version e.g. 2.38 ?

Any help or info is much appreciated.

<script>

function loadImage(url) {
    var img = new Image();
    img.src = url;
    return img;
}

var canvasImg = loadImage("./553-1920x1080.jpg");

function drawBigCanvas() {

    clearBigCanvas();

    var bigCanvas = document.createElement("canvas");
    bigCanvas.id = "bigCanvas";
    bigCanvas.width = 1920;
    bigCanvas.height = 1080;
    bigCanvas.style.position = "absolute";

    var bigContext = bigCanvas.getContext("2d");
    bigContext.drawImage(canvasImg, 0, 0, 1920, 1080);

    document.body.appendChild(bigCanvas);
    bigContext = null;
    bigCanvas = null;
}

function clearBigCanvas() {
    if (document.getElementById("bigCanvas")) {
        document.getElementById("bigCanvas").getContext("2d").clearRect(0, 0, 1920, 1080);
        document.getElementById("bigCanvas").remove();
    }
}


document.addEventListener("keydown", onKeyDown)


function onKeyDown (event) {
  var keyCode = event.keyCode;
  console.log("keyCode:" + keyCode);
  switch (keyCode) {
    case 37: // Left
      console.log("Left");
      drawBigCanvas();
      break;
    case 39: // Right
      console.log("Right");
      break;
    case 13: // Ok
      console.log("Enter");
      clearBigCanvas();
      break;
  }
}

</script>

[laurence-ejraee]

Same issue seen with this Lightning app demo. https://github.com/mlapps/router-example-app
Using canvas2d navigating between Home page, Browse page, Account page, and back to home page sees graphics memory increasing each time.
Using webgl canvas the memory decreased back to the original each time we return to home page.

[laurence-ejraee]

We have now built with ENABLE_ACCELERATED_2D_CANVAS=OFF and this fixes the memory leak.
Now when I run the example and navigate between the pages, the GFX memory remains at 55%

Any idea why this option causes the memory increase/leak ?
Also if there are any potential drawbacks with disabling the issue, if you could share that would be very valuable.

Thanks again!

[magomez]

By setting ENABLE_ACCELERATED_2D_CANVAS=OFF you're telling the canvas not to use the GPU, and that's why the GPU memory doesn't grow, as it's not used. CPU memory is used instead. A drawback is that the canvas will be slower, but the relevance of this depends on your use case really. If you want to develop something like a game, where the framerate is important, it will be a problem. It you plan to show mostly static elements, then you'll be fine.

Regarding the leak: we don't have reports of GPU mem being leaked with the canvas on 2.28. It doesn't mean that it can't happen but it would be curious that it wasn't detected before. Anyway, are you sure it's a leak? How long have you waited for the memory to be released? Cause it depends on when the garbage collection happens and such.

[laurence-ejraee]

Thanks for the info, didn't realise that setting actually determines if canvas uses GPU memory, makes sense.

The reason I believe it is a leak is because I forced the system to run garbage collection at regular intervals but the GPU memory seems to never be released. Also using the Lightning demo I have used their GPU memory gc() method to force collection but again GFX memory doesn't decrease.
When using webgl canvas the memory is released as expected after the objects are destroyed and garbage is collected, but with 2d canvas memory still doesn't release after these.

It might be specific to the build options we use on our system, maybe why others have not reported similar.

[laurence-ejraee]

@magomez We are trying to disable the canvas2d acceleration by calling the setting from WebKitImplementation.cpp in rdkservices webkit_settings_set_enable_accelerated_2d_canvas()
But depsite setting it to false here, this line in HTMLCanvasElement::shouldAccelerate() says it is still set to true:
if (!settings.accelerated2dCanvasEnabled()) {

Any idea why this setting isn't working properly in webkit?
Thanks

[pgorszkowski-igalia]

@laurence-ejraee : I am checking it

[laurence-ejraee]

@pgorszkowski-igalia Thanks, I've managed to identify the issue. It's always set to true by default in our build by this line in WPEView.cpp: preferences->setAccelerated2dCanvasEnabled(true);