Home forums Report Bugs Safari iOS: Total canvas memory use exceeds the maximum limit

This topic contains 5 replies, has 2 voices, and was last updated by  Shashi Ranjan 9 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #24245

    After rendering a free charts we got following Error on an iPad Safari:

    Total canvas memory use exceeds the maximum limit (576 MB).
    Na — canvasjs.min.js:20:210

    function Na(p, m, G) {
    if (s && ab) {
    var v = p.getContext(“2d”);
    Oa = v.webkitBackingStorePixelRatio ||
    v.mozBackingStorePixelRatio || v.msBackingStorePixelRatio || v.oBackingStorePixelRatio || v.backingStorePixelRatio || 1;
    ha = Ta / Oa;
    p.width = m * ha;
    p.height = G * ha;
    Ta !== Oa && (p.style.width = m + “px”, p.style.height = G + “px”, v.scale(ha, ha))
    } else
    p.width = m, p.height = G
    }

    Any Ideas?

    #24262

    @uniserve,

    Can you please let us know the version of CanvasJS being used by you?

    Earlier WebKit allowed 448MB of canvas buffer memory whereas now they have dropped it to 224MB. Because of this, there was some memory issue with CanvasJS Charts in the latest iOS. However, we have optimized memory consumption in CanvasJS v2.3 – please check out this release blog for more info. Kindly download the latest version of CanvasJS Charts from our download page and let us know your feedback.

    If the issue still persists, kindly share sample project over Google-Drive or Onedrive, so that we can look into the issue and help you resolve it.

    ____
    Shashi Ranjan
    Team CanvasJS

    #24273

    We have the latest version 2.3 installed, no change.
    The error also occurs on your demo page if you leave many diagrams on one page (> 50).
    Is it possible to clear the Canvas memory on iOS device?

    #24303

    @uniserve,

    Can you please share a sample project reproducing the issue you are facing over Google-Drive or Onedrive along with the OS details (Name and Version) so that we can understand the issue better and help you out.

    ____
    Shashi Ranjan
    Team CanvasJS

    #24314

    We use tested this on an

    iPad pro iOS Version 12.1.3,
    iPad pro iOS Version 12.1.4,
    iPhone 7 iOS Version 12.1.3,
    iPhone Xs iOS Version 12.1.3,
    iPhone Xs iOS Version 12.1.4

    always with Safari.

    Here is the Link to the demo Page http://dev.uniserve.de (Using chart.destroy()).
    Here is the Link to the demo Page http://dev.uniserve.de/test2.html (Using new chart object).

    To force the problem there are a the Buttons

    Here is the Code of an sample page :

    <html>
    <head>
    <script>
    var renderNumber = 0;
    var chart ;
    window.onload = function () {

    chart = new CanvasJS.Chart(“chartContainer”, {
    animationEnabled: true,
    exportEnabled: true,
    theme: “light1”, // “light1”, “light2”, “dark1”, “dark2”
    title:{
    text: “Render Test”
    },
    data: [{
    type: “column”, //change type to bar, line, area, pie, etc
    //indexLabel: “{y}”, //Shows y value on all Data Points
    indexLabelFontColor: “#5A5757”,
    indexLabelPlacement: “outside”,
    dataPoints: [
    { x: 10, y: 71 },
    { x: 20, y: 55 },
    { x: 30, y: 50 },
    { x: 40, y: 65 },
    { x: 50, y: 92, indexLabel: “Highest” },
    { x: 60, y: 68 },
    { x: 70, y: 38 },
    { x: 80, y: 71 },
    { x: 90, y: 54 },
    { x: 100, y: 60 },
    { x: 110, y: 36 },
    { x: 120, y: 49 },
    { x: 130, y: 21, indexLabel: “Lowest” }
    ]
    }]
    });
    chart.render();
    }

    function rerenderChart(number) {
    chart.destroy();
    if (number == null)
    {
    renderNumber = renderNumber + 1;
    number = renderNumber;
    }
    chart = new CanvasJS.Chart(“chartContainer”, {
    animationEnabled: true,
    exportEnabled: true,
    theme: “light1”, // “light1”, “light2”, “dark1”, “dark2”
    title:{
    text: “Render ” + number
    },
    data: [{
    type: “column”, //change type to bar, line, area, pie, etc
    //indexLabel: “{y}”, //Shows y value on all Data Points
    indexLabelFontColor: “#5A5757”,
    indexLabelPlacement: “outside”,
    dataPoints: [
    { x: 10, y: 71 },
    { x: 20, y: 55 },
    { x: 30, y: 50 },
    { x: 40, y: 65 },
    { x: 50, y: 92, indexLabel: “Highest” },
    { x: 60, y: 68 },
    { x: 70, y: 38 },
    { x: 80, y: 71 },
    { x: 90, y: 54 },
    { x: 100, y: 60 },
    { x: 110, y: 36 },
    { x: 120, y: 49 },
    { x: 130, y: 21, indexLabel: “Lowest” }
    ]
    }]
    });
    chart.render();
    }
    function rerenderChart10() {
    for (var i = 1; i <= 10; i++) {
    setTimeout(rerenderChart(),50000);
    }
    }
    function rerenderChart100() {
    for (var i = 1; i <= 100; i++) {
    setTimeout(rerenderChart(),50000);
    }
    }
    </script>
    </head>
    <body>
    <div id=”chartContainer” style=”height: 80%; width: 100%;”></div>
    <div id=”refreshPanel”><button onclick=”rerenderChart()”>Rerender once</button>
    <button onclick=”rerenderChart10()”>Rerender 10times</button>
    <button onclick=”rerenderChart100()”>Rerender 100times</button></div>
    <script src=”https://canvasjs.com/assets/script/canvasjs.min.js”></script>
    </body>
    </html>

    #24345

    @uniserve,

    Thanks for reporting the use case, OS & browser details. We are looking into the issue and will get back to you at the earliest.

    ____
    Shashi Ranjan
    Team CanvasJS

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.