Is there a limit of pixiJS canvas size

Question

Problem

Hi everyone i got a problem with my canvas generated with pixiJS library. I need to create a tool which allow to users to custom and improve image quality with brigtness, contrast, sharping etc. The probleme is that I work with big pictures (7000x3500px) and the picture is distorted after putting effects. In my company i got the problem with just a MAC. In others devices it works well.

Example of simple code

var canvas2 = document.createElement( "canvas" );
canvas2.width   = 7000;
canvas2.height  = 3500;

var image2 = new Image();
image2.src = "img2.jpg";

var ctx2 = canvas2.getContext( "2d" );

image2.addEventListener( "load", function() {
    ctx2.drawImage( image2, 0, 0 );

    var app         = new PIXI.Application();
    var texture     = new PIXI.Texture.fromCanvas( canvas2 );
    var sprite      = new PIXI.Sprite( texture );
    app.stage.addChild( sprite );

    var color = new PIXI.filters.AdjustmentFilter();
    sprite.filters = [color];
    color.red = 1.5;
    var exp = app.renderer.plugins.extract.canvas( sprite )

    console.log( exp.toDataURL( "image/jpeg" ) );
} );

Results

I changed width and height.

Firstly (800pc / 400px) : good image.

Secondly (7000px/3500px) : distorted image

Griva · Answer 1 · 2018-11-21T18:20:05.040

Shortly, yes.

PIXI is only library helping you manage the HTMLCanvas by drawing, rendering etc. So shortly, PIXI have nothing to do with canvas size itself.

Recently I tested filtering of image by using html canvas and noticed it got problems when image was very big but in my case it was around 15.000 x 5000. You are probably interested in What is the max size of html canvas and you can find some info there. Remember these informations can be outdated.

Chrome:

Maximum height/width: 32,767 pixels Maximum area: 268,435,456 pixels (e.g., 16,384 x 16,384)

Firefox:

Maximum height/width: 32,767 pixels Maximum area: 472,907,776 pixels (e.g., 22,528 x 20,992)

[...]

First of all there is no universal answer how big it can be becuase it's defined by device and browser. Mobile devices will have way bigger limitations than desktop browsers - in this case you just can't trust user and you need to find proper workaround to your problem by limiting size or other way to filter images.

Second - the fact that you are using filters in PIXI can complicate everything. First of all filters work only in WebGL context, that means you have to be sure it's supported. Next, you have to load image as texture to memory - PIXI do this for you (in your case) via PIXI.Texture.fromCanvas( canvas2 ); and this is also limited. Texture size is limited by your GPU free memeory and this is as I know not possible to detect in webGL via browser. (Also if you load more images you need to wait for first image to be GC or do it manually) I try to say that even if you fit in canvas max size it can happen that mobile device is out of GPU memory and webGL will crash. (The same goes for desktop but it's harder)

Last thing is that (I need to find a source) I remember that there is more limit of webGL instance. For example in firefox you can have in total (all cards) 16 instances, if you create more then the old one is dropped. I can be wrong but one instace size (desktop) is 1024 but it is probably depended on device. In this case if your canvas has 1100 x 1100 you used 4 of them. I think it's small chance to be problem but I want to note it, so you are aware of this.

Thank you for your reply that was very useful. The problem is that i can't use multiple canvas because i created a blur tool, you can blur some areas in canvas with mousedown and mousemove events.The process is like Paint, when you want to draw. If i blur multiple canvas we can see the separation between both. Is there another solution? — WMonteiro, Nov 27 '18 at 09:23
To clarify, when I say webGL instance I don't mean canvas instance. If you create canvas, these instances are made automaticaly for browser in background. Anyway It's hard to say (for me) solution because it depends on what you need. If this have not to be made in web browser you can create it in other prog. language. I am not canvas expert and I don't know good solution personally, if you really need it you must make research, you could write for example to PIXI creators, they might know possible workaround to your problem (maybe some kind of buffering or partial rendering). good luck — Griva, Nov 28 '18 at 13:46
@WMonteiro One more thing, you asked "Is there a limit of pixiJS canvas size" and I answered this question but I does not mean that your case is exactly related to canvas size, it can be texture max size (my second note) or somethig completely else. I think it can be actually good option to create an issue with example in PIXI github. — Griva, Nov 28 '18 at 14:13
Thank you for your help I can't open isuue on github because the issue occurs only on one MAC. I should develop platform to enhance images of 7000 px and I think I should use another language like c++ because there will be better performance than Javascript — WMonteiro, Nov 29 '18 at 10:40

Is there a limit of pixiJS canvas size

1 Answers1