CODEWITHSUNDEEP
pixi.js
WMonteiro
WMonteiro

Reputation: 107

Is there a limit of pixiJS canvas size

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

Upvotes: 1

Views: 2797

Answers (1)

Griva
Griva

Reputation: 1738

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.

enter image description here

Upvotes: 1

Related Questions