Sign in to follow this  
Adam Procter

VueJs and Pixi - not rendering

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

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.

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.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.