Jump to content

VueJs and Pixi - not rendering

Adam Procter

Recommended Posts

I am new to pixi and am just starting to integrate this in my vue project as a new layer but I am not calling it in the right place as the pixi stuff does not render.

Does anyone know where I should call the PIXI stuff within the vue structure please.

Here is my code so far


  <div class="connections">
    <canvas id="pixi"></canvas>

import { mapState } from 'vuex'
import * as PIXI from 'pixi.js'
export default {
  name: 'ConnectionsLayer',
  computed: mapState({
    toolmode: (state) => state.ui.mode,
  methods: {},

// I assume this should be called above maybe on mounted 

var canvas = document.getElementById('pixi')

const app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  antialias: true,
  transparent: true,
  view: canvas,

let graphics = new PIXI.Graphics()
graphics.x = app.renderer.width / 2
graphics.y = app.renderer.width / 2

graphics.beginFill(0xde3249, 1)
graphics.drawCircle(100, 250, 50)

graphics.beginFill(0xde3249, 1)
graphics.drawCircle(300, 250, 50)

graphics.lineStyle(2, 0xffffff, 1)
graphics.moveTo(100, 250)
graphics.lineTo(300, 250)


any pointers would be much appreciated thanks

Link to comment
Share on other sites

  • 4 months later...

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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...