canvas undefined

[pclokcer]

where is this problem. I am using Vue

html
`<CanvasView col="0" row="0" width="100" height="300" @draw="draw" />`
JS:
`import {
  Canvas,
  Cap,
  createRect,
  createRectF,
  Paint,
  Style
} from "nativescript-canvas";
import { Color } from "@nativescript/core/color/color";`

`methods: {
    draw({ canvas }) {
      const paint = new Paint();
      paint.setColor(new Color("black"));
      paint.strokeWidth = 10;
      canvas.drawRect(createRect(0, 0, 200, 100), paint);
    }
  }`

[farfromrefug]

Not possible to help you without a callstack.

[PatrickLohan]

What 'canvas' is the draw command using?

[pclokcer]

Not possible to help you without a callstack.

JS: [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'drawRect' of undefined"
JS:
JS: found in
JS:
JS: ---> <Home> at components/Home.vue
JS:        <Frame>
JS:          <Root>
System.err: An uncaught Exception occurred on "main" thread.
System.err: Unable to start activity ComponentInfo{org.nativescript.oyun/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: Calling js method onCreate failed
System.err: TypeError: Cannot read property 'drawRect' of undefined
System.err:
System.err: StackTrace:
System.err: java.lang.RuntimeException: Unable to start activity ComponentInfo{org.nativescript.oyun/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: Calling js method onCreate failed
System.err: TypeError: Cannot read property 'drawRect' of undefined
System.err:     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2976)
System.err:     at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3113)
System.err:     at android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:78)        
System.err:     at android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:113)
System.err:     at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:71)      
System.err:     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1858)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:106)
System.err:     at android.os.Looper.loop(Looper.java:201)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:6820)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:547)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:922)
System.err: Caused by: com.tns.NativeScriptException: Calling js method onCreate failed
System.err: TypeError: Cannot read property 'drawRect' of undefined
System.err:     at com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1286)
System.err:     at com.tns.Runtime.callJSMethodImpl(Runtime.java:1173)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1160)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1138)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1134)
System.err:     at com.tns.NativeScriptActivity.onCreate(NativeScriptActivity.java:19)
System.err:     at android.app.Activity.performCreate(Activity.java:7224)
System.err:     at android.app.Activity.performCreate(Activity.java:7213)
System.err:     at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1272)
System.err:     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2956)
System.err:     ... 11 more

[farfromrefug]

Dont think you can write it like that vue. Please look at the demo app https://github.com/Akylas/nativescript-canvas/blob/master/demo-vue/app/examples/Complex.vue

[gdyrrahitis]

Same issue on NativeScript + JS template.

Stack Trace

TypeError: Cannot read property 'canvas' of undefined

StackTrace:
push.../node_modules/nativescript-canvas/canvas.js.CanvasView.createNativeView(file:///data/data/org.nativescript.preview/files/app/vendor.js:819:35)
        at ViewBase._setupUI(file:///data/data/org.nativescript.preview/files/app/tns_modules/@nativescript/core/ui/core/view-base/view-base.js:511:31)
        at (file:///data/data/org.nativescript.preview/files/app/tns_modules/@nativescript/core/ui/core/view-base/view-base.js:553:19)
        at LayoutBaseCommon.eachChildView(file:///data/data/org.nativescript.preview/files/app/tns_modules/@nativescript/core/ui/layouts/layout-base-common.js:125:26)
        at ViewCommon.eachChild(file:///data/data/org.nativescript.preview/files/app/tns_modules/@nativescript/core/ui/core/view/view-common.js:925:14)
        at ViewBase._setupUI(file:///data/data/org.nativescript.preview/files/app/tns_modules/@nativescript/core/ui/core/view-base/view-base.js:552:14)
        at (file:///data/data/org.nativescript.preview/files/app/tns_modules/@nativescript/core/ui/core/view-base/view-base.js:553:19)
        at ContentView.eachChildView(file:///data/data/org.nativescript.preview/files/app/tns_modules/@nativescript/core/ui/content-view/content-view.js:70:13)
        at PageBase.eachChildView(file:///data/data/org.nativescript.preview/files/app/tns_modules/@nativescript/core/ui/page/page-common.js:126:40)
        at ViewCommon.eachChild(file:///data/data/org.nativescript.preview/files/app/tns_modules/@nativescript/core/ui/core/view/view-common.js:925:14)
        at ViewBase._setupUI(file:///data/data/org.nativescript.preview/files/app/tns_modules/@nativescript/core/ui/core/view-base/view-base.js:552:14)
        at ViewBase._addViewCore(file:///data/data/org.nativescript.preview/files/app/tns_modules/@nativescript/core/ui/core/view-base/view-base.js:448:18)
        at ViewBase._addView(file:///data/data/org.nativescript.preview/files/app/tns_modules/@nativescript/core/ui/core/view-base/view-base.js:437:14)
        at FragmentCallbacksImplementation.onCreateView(file:///data/data/org.nativescript.preview/files/app/tns_modules/@nativescript/core/ui/frame/frame.js:700:19)
        at FragmentClass.onCreateView(file:///data/data/org.nativescript.preview/files/app/tns_modules/@nativescript/core/ui/frame/fragment.js:29:38)
        at com.tns.Runtime.callJSMethodNative(Native Method)
        at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1286)
        at com.tns.Runtime.callJSMethodImpl(Runtime.java:1173)
        at com.tns.Runtime.callJSMethod(Runtime.java:1160)
        at com.tns.Runtime.callJSMethod(Runtime.java:1138)
        at com.tns.Runtime.callJSMethod(Runtime.java:1134)
        at com.tns.FragmentClass.onCreateView(FragmentClass.java:54)
        at androidx.fragment.app.Fragment.performCreateView(Fragment.java:2439)
        at androidx.fragment.app.FragmentManagerImpl.moveToState(FragmentManager.java:1460)
        at androidx.fragment.app.FragmentManagerImpl.moveFragmentToExpectedState(FragmentManager.java:1784)
        at androidx.fragment.app.FragmentManagerImpl.moveToState(FragmentManager.java:1852)
        at androidx.fragment.app.BackStackRecord.executeOps(BackStackRecord.java:802)
        at androidx.fragment.app.FragmentManagerImpl.executeOps(FragmentManager.java:2625)
        at androidx.fragment.app.FragmentManagerImpl.executeOpsTogether(FragmentManager.java:2411)
        at androidx.fragment.app.FragmentManagerImpl.removeRedundantOperationsAndExecute(FragmentManager.java:2366)
        at androidx.fragment.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:2273)
        at androidx.fragment.app.FragmentManagerImpl$1.run(FragmentManager.java:733)
        at android.os.Handler.handleCallback(Handler.java:907)
        at android.os.Handler.dispatchMessage(Handler.java:105)
        at android.os.Looper.loop(Looper.java:216)
        at android.app.ActivityThread.main(ActivityThread.java:7625)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:524)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:987)

main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:cv="nativescript-canvas" navigatingTo="onNavigatingTo">
    <ActionBar title="Color Picker for LED" icon=""></ActionBar>

    <StackLayout class="p-20" horizontalAlignment="center">
        <cv:CanvasView width="100" height="100" draw="draw"/>
    </StackLayout>
</Page>

[farfromrefug]

@gdyrrahitis this is not the same issue ! It seems in you case it does not find the native library. Can you try to remove platforms. What platform? What version of everything?