humbertaco

CanvasRenderer and Container object not working together

Recommended Posts

Hi everyone,

This is my first post, so please let me know in case I miss anything! :)

I am currently implementing some graphic stuff by means of React and Pixi.js for a data visualization project. I have part of it up and running. Recently, I needed to make use of CanvasRenderer because I have multiple small canvases (with WebGL the browser was throwing warnings about the loss of contexts, problem that apparently does not happen with CanvasRenderer context). The thing is that I followed the same approach:

1. Create my renderer the usual way:

const renderer = new CanvasRenderer(options);

2. Create some container that functions as a stage:

// graphics is an instance of Graphics with some drawing primitives
const stage = new Container();
stage.addChild(graphics);

3. Render the scene:

renderer.render(stage);

 

The problem that I am finding is that the stage container does not expose any renderCanvas method, which seems to be called by the CanvasRenderer's render method internally.

At the beginning of my react component, I am importing these things:

import {CanvasRenderer} from "@pixi/canvas-renderer";
import {Container} from "@pixi/display"
import '@pixi/canvas-display'; // This package seems to be the one adding the renderCanvas function that I miss

I have even tried with pixi.js-legacy package by importing directly CanvasRenderer and Container. However, the result seems to be the same.

 

My question is: is there any specific way to import the components in order to make this work? Am I missing some silly detail?

 

Many thanks in advance!

Share this post


Link to post
Share on other sites

Hi Ivan, thanks for your reply!

I have been debugging (extensively) and it seems the error was caused by some odd state of package-lock.json of npm, or some strange dependency issue. Deleting that file (also did for yarn.lock), plus all the modules, and starting from scratch to install all the dependencies seemed to make the trick. I did not even think of this option, but after your message saying that it should all work fine, I created some basic test with a new fresh project and I realized everything was just working fine.

Perhaps this post can help anyone who bumps into a similar problem.

Thanks again and sorry for the mess! :)

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.