Getting image from canvas.

[aleronal]

Make sure to check the demo app(s) for sample usage

I checked all examples specially Complex.vue and canvastests.ts but can't make it work.

If the demo apps cannot help and there is no issue for your problem, tell us about it

Please, ensure your title is less than 63 characters long and starts with a capital
letter.
Calling canvas.getImage() returns "undefined" on draw method

Which platform(s) does your issue occur on?

-Android

• emulator

Please, provide the following version numbers that your issue occurs with:

• NS version: 8.5.3
• Cross-platform modules: (check the 'version' attribute in the
  node_modules/tns-core-modules/package.json file in your project)
• android 8.5.0
• "dependencies": {
  "@nativescript-community/ui-canvas": "^4.6.12",
  "@nativescript/camera": "^5.1.0",
  "@nativescript/core": "~8.5.0",
  "@nativescript/theme": "~3.0.2",
  "nativescript-camera": "^4.5.0",
  "nativescript-material-loading-indicator": "^1.0.0",
  "nativescript-photo-editor": "file:../nativescript-photo-editor",
  "nativescript-vue": "~2.9.3"
  },
  "devDependencies": {
  "@nativescript/android": "8.5.0",
  "@nativescript/ios": "8.5.2",
  "@nativescript/preview-cli": "1.0.2",
  "@nativescript/webpack": "~5.0.14",
  "nativescript-vue-template-compiler": "~2.9.3"
  }

Please, tell us how to recreate the issue in as much detail as possible.

I'm trying to use a canvas to base on someone clicking a pen they will be able to draw on top of an image.

When calling canvas.getImage() I'm getting as a response "undefined" when using it on draw() Method.

I've been trying to look at examples with getting the canvas and saving the image but I was unable to achieve this.
I was able to get the value from canvas.getImage() If I duplicate the code creating a new canvas object and copying exactly what the event.canvas does(see example below)
I made this small example when drawing a simple text in case it was my other code but this happens here as well. The canvas.getImage() returns "undefined"

Is there any code involved?

<CanvasView ref="canvas" width="50%" height="50%" @draw="onDraw" @touch="onTouch" />


onDraw(event) {
           try {
               const canvas = event.canvas;

               const textPaint = new Paint();
               textPaint.color = new Color('red');
               textPaint.setStrokeWidth(3);
               textPaint.setAntiAlias(true);
               canvas.drawBitmap(this.image, null, createRect(0, 0, canvas.getWidth(), canvas.getHeight()), null);
               canvas.drawText('Filled Text', 20, 20, textPaint);
               canvas.getImage();
               //Returns undefined

               let newCanvas = new Canvas(canvas.getWidth(), canvas.getHeight());
               newCanvas.drawBitmap(this.image, null, createRect(0, 0, canvas.getWidth(), canvas.getHeight()), null);
               newCanvas.drawText('Filled Text', 60, 0, textPaint);
               newCanvas.getImage();
               // Returns bitmap image -  Works but not ideal!
} catch (error) {
               console.log(error);
           }

[farfromrefug]

@aleronal dont think you can do it like that right Now. the canvas from the draw event is a bit special. for now you need to create a new canvas, draw into it and use getImage.
will see what I can do when I have time to make it work as you did

[aleronal]

@farfromrefug thanks for your quick response.

No worries, any help will be very much appreciate it. I’m just trying to draw on top of a image. Thank you very much!

On my example it kind of works but I mentioned it’s not ideal since on the real code I’m registering on the touch event all X and Y and then on draw event drawing on top of the canvas with the image behind all points registered. Not sure it’s ideal but it’s how I got it to work!

So for this to work I’ll have to do the same for canvas(so it shows on the screen) and newCanvas to then call getImage().

Or do you know if there is a way of creating a canvas based on the canvas returned from draw method?