fix: transferControlToOffscreen cannot set properties of undefined

packages/vue3-pixi/src/components/application/index.ts

@@ -43,13 +43,12 @@ export const Application = defineComponent({
     const pixiApp = ref()
 
     let app: App<Container> | undefined
-
     function mount() {
-
+      let view: HTMLCanvasElement | OffscreenCanvas | undefined = canvas.value
       if (props.transferControlToOffscreen)
-        canvas.value?.transferControlToOffscreen()
+        view = canvas.value?.transferControlToOffscreen() as OffscreenCanvas
 
-      const context = canvas.value?.getContext('webgl', {
+      const context = view?.getContext('webgl', {
         alpha: props.alpha,
         antialias: props.antialias,
         depth: props.depth,
@@ -64,7 +63,14 @@ export const Application = defineComponent({
       if (!context)
         warn('could not crate webgl context')
 
-      const inst = new _Application({ view: canvas.value, ...props })
+      const params = { ...props } as { [key: string]: any }
+      // delete params.autoDensity
+
+      const inst = new _Application({ view, ...params })
+
+      inst.view.width = params.width
+      inst.view.height = params.height
+
       pixiApp.value = markRaw(inst)
 
       app = createApp({

packages/vue3-pixi/src/composables/useScreen.ts

@@ -5,6 +5,7 @@ import type { Application, ICanvas } from 'pixi.js'
 import { Rectangle } from 'pixi.js'
 
 import { computedWithControl, useResizeObserver } from '@vueuse/core'
+
 import { useApplication } from './useApplication'
 
 export function useScreen(app?: Ref<Application<ICanvas>>): Ref<Rectangle> {
@@ -17,7 +18,8 @@ export function useScreen(app?: Ref<Application<ICanvas>>): Ref<Rectangle> {
     () => useApp.value?.screen || defaultRectangle,
   )
 
-  useResizeObserver(view, screen.trigger)
+  if (view?.value instanceof HTMLCanvasElement)
+    useResizeObserver(view, screen.trigger)
 
   return screen
 }