How to import jCanvas to work with Angular?

[afunworm]

Hi.

Is there a way for this to work with Angular?

I have the canvas set up in the view component. In the script component, I tried importing both jQuery and jCanvas using different methods, for example:

import * as $ from 'jQuery'; import * as jCanvas from 'jcanvas';

Then using different way to invoke it. An example would be:

jCanvas('#canvas') .addLayer({ type: 'image', name: 'bg', source: 'images/canvas/bg.png', x: 0, y: 0, width: 613, height: 905, fromCenter: false, }) .drawLayers();

Or:

$('#canvas') .addLayer({ type: 'image', name: 'bg', source: 'images/canvas/bg.png', x: 0, y: 0, width: 613, height: 905, fromCenter: false, }) .drawLayers();

But they all returns the error: $(...).addLayer is not a function.

Thank you.

[caleb531]

@afunworm To confirm, are you able to call regular (non-jCanvas) jQuery methods?

[afunworm]

@afunworm To confirm, are you able to ucalle regular (non-jCanvas) jQuery methods?

Hi.

I am not sure what you meant. I have tried both $('#canvas').addLayer() and jCanvas('#canvas').addLayer() but none worked.

Do you have a sample code that you would like me to try?

Thank you!

[afunworm]

@afunworm To confirm, are you able to ucalle regular (non-jCanvas) jQuery methods?

Ah. I know what you meant. Yes, I was able to call regular non-jCanvas jQuery methods.

[caleb531]

@afunworm jCanvas methods exist in the same namespace as regular jQuery methods.

So in the same way that you call a regular jQuery method:

import * as $ from 'jQuery';
$('#myelem').addClass('highlight');

You call jCanvas methods using $() like normal, not jCanvas():

import * as $ from 'jQuery'; import 'jcanvas';
$('#mycanvas').addLayer({...});

Notice above how you're only importing 'jcanvas for side-effects, meaning there's no jCanvas object or anything for you to capture into a variable.

[afunworm]

@afunworm jCanvas methods exist in the same namespace as regular jQuery methods.

So in the same way that you call a regular jQuery method:

import * as $ from 'jQuery';
$('#myelem').addClass('highlight');

You call jCanvas methods using $() like normal, not jCanvas():

import * as $ from 'jQuery'; import 'jcanvas';
$('#mycanvas').addLayer({...});

Notice above how you're only importing 'jcanvas for side-effects, meaning there's no jCanvas object or anything for you to capture into a variable.

Hi.

Sorry I took a while to respond, but this doesn't seem to work yet. I received the following errors now:

core.js:4197 ERROR TypeError: jQuery__WEBPACK_IMPORTED_MODULE_1__(...).addLayer is not a function

And I imported it the way shown. I am trying to use this library with Angular, if that helps. If nothing works, I might have to resort to doing the default Githubissues.

Githubissues is a development platform for aggregating issues.