Is there a way to use canvas libraries like Canvg?

[darkyelox]

I tried using it with the NodeJS way it offers in its README but with no luck, the app closes without any error output on iOS, I was trying to use it because I wanted to resize an SVG to the canvas viewport, dunno how to do it with canvas normal API

[triniwiz]

Hmmm you should add the polyfill also then require(‘@nativescript/canvas-polyfill’) in the app.ts or main.ts

[darkyelox]

Hmmm you should add the polyfill also then require(‘@nativescript/canvas-polyfill’) in the app.ts or main.ts

Done but happened the same, I tried this on my code:

// I have included polyfill into my main.ts using import "@nativescript/canvas-polyfill";
import {
  DOMParser
} from 'xmldom';
import { Canvas, CanvasRenderingContext2D } from '@nativescript/canvas';
import Canvg from 'canvg';

onDrawWave(event: EventData) {
    console.log('wave progress')

    const canvas = event.object as Canvas
    const canvasContext = canvas.getContext('2d') as CanvasRenderingContext2D;

    const svg = Canvg.fromString(canvasContext as any, '<svg width="600" height="600"><text x="50" y="50">Hello World!</text></svg>', {
      DOMParser
    });

    svg.render()
  }

What I'm trying to do is to resize a waveform SVG image that I created using InkScape to fit the size of my canvas (at least the width), do you know an alternative way? I did paint my svg using canvas.stroke with a Path2D but don't know how to resize it to fit the canvas space, I have used canvas.resize but I think is not the best way

[triniwiz]

feel like you would need another canvas to draw into other or u can always scale the canvas before since it's not drawing to the device scale

[sebj54]

@darkyelox Maybe you'd like to have a look at the issue I opened on the previous plugin's repository: https://github.com/triniwiz/nativescript-canvas-plugin/issues/17

Last time, I could not make canvg work so I ended up drawing paths "manually" with this code:

/* global com CanvasPath2D */
import { isAndroid } from 'tns-core-modules/platform'
import { TNSPath2D } from 'nativescript-canvas-plugin'

let instance

if (isAndroid) {
    instance = new com.github.triniwiz.canvas.CanvasPath2D(path)
} else {
    instance = CanvasPath2D.alloc().initWithData(path)
}

const path2D = new TNSPath2D(instance)

// Then draw using canvas' context
ctx.stroke(path2D )
ctx.fill(path2D , 'nonzero')

I'm not sure if global variables or exports have the same name with this version though. You may adapt my code if necessary.

[darkyelox]

@darkyelox Maybe you'd like to have a look at the issue I opened on the previous plugin's repository: triniwiz/nativescript-canvas-plugin#17

Last time, I could not make canvg work so I ended up drawing paths "manually" with this code:

/* global com CanvasPath2D */
import { isAndroid } from 'tns-core-modules/platform'
import { TNSPath2D } from 'nativescript-canvas-plugin'

let instance

if (isAndroid) {
    instance = new com.github.triniwiz.canvas.CanvasPath2D(path)
} else {
    instance = CanvasPath2D.alloc().initWithData(path)
}

const path2D = new TNSPath2D(instance)

// Then draw using canvas' context
ctx.stroke(path2D )
ctx.fill(path2D , 'nonzero')

I'm not sure if global variables or exports have the same name with this version though. You may adapt my code if necessary.

Thank you, but I'm able to paint paths easily using the Path2D constructor (maybe it's still in development) of this new library, I was only exploring if I could use this kind of libraries for manipulate the SVG because I needed to resize it to fit my canvas boundaries I can resize it using the ctx.resize but not quite precise and a library like canvg would be awesome for this kind of works

[triniwiz]

@darkyelox I need to release another version there was a massive refactor so most of the names were changed trying my best to release another version eod or over the weekend even with initial support for SVG 😄

[triniwiz]

Canvg should be good to go in the next release

[triniwiz]

Update the polyfill to the latest version to enjoy