CODEWITHSUNDEEP
node.jstypescriptpixi.jsmithril.js
Bussiere
Bussiere

Reputation: 1152

render a canvas in mithril

how can i render a canvas inside mithril ?

here is my typescript code :

import * as mithril from 'mithril';
import m from 'mithril';
import * as PIXI from 'pixi.js';

var root = document.body

// The application will create a renderer using WebGL, if possible,
// with a fallback to a canvas render. It will also setup the ticker
// and the root stage PIXI.Container
const app = new PIXI.Application();

// The application will create a canvas element for you that you
// can then insert into the DOM
//document.body.appendChild(app.view);

// load the texture we need
app.loader.add('bunny', 'assets/bunny.png').load((loader, resources) => {
    // This creates a texture from a 'bunny.png' image
    const bunny = new PIXI.Sprite(resources.bunny.texture);

    // Setup the position of the bunny
    bunny.x = app.renderer.width / 2;
    bunny.y = app.renderer.height / 2;

    // Rotate around the center
    bunny.anchor.x = 0.5;
    bunny.anchor.y = 0.5;

    // Add the bunny to the scene we are building
    app.stage.addChild(bunny);

    // Listen for frame updates
    app.ticker.add(() => {
         // each frame we spin the bunny around a bit
        bunny.rotation += 0.01;
    });
});
// not working
m("div", {style: {color: "red"}}, app.view)
// also not working
mithril.render(root,app.view)

So i would to insert a pixijs canvas with mithril any idea how to do that ?

I'am using typescript and mithril and pixijs.

Regards

Upvotes: 1

Views: 267

Answers (1)

Stephan Hoyer
Stephan Hoyer

Reputation: 4928

You have to create a container to attach the pixi canvas to

const app = new PIXI.Application({
  width: 640,
  height: 360,
  backgroundColor: 0x1099bb
});
const basicText = new PIXI.Text('Mithril.js rocks!');
basicText.x = 50
basicText.y = 100
app.stage.addChild(basicText)

m.mount(document.body, {
  view: () => m('.pixiContainer', {
    oncreate: ({ dom }) => dom.appendChild(app.view)
  })
})
<script src="https://unpkg.com/[email protected]/mithril.min.js"></script>
<script src="https://pixijs.download/release/pixi.js"></script>

Upvotes: 4

Related Questions