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 <script> tag and hope for the best.

Thank you!

[caleb531]

@afunworm Which JS file are you using in your project? jcanvas.js or jcanvas.min.js? If the latter, perhaps you need to do this:

import 'jcanvas.min';

[afunworm]

@afunworm Which JS file are you using in your project? jcanvas.js or jcanvas.min.js? If the latter, perhaps you need to do this:

import 'jcanvas.min';

Hi.

Thank you for your response. Unfortunately, import 'jcanvas.min' results in Can't resolve 'jcanvis.min'.

I installed it using npm install for my Angular project, and did what you suggested:

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

$('#canvas').addLayers(...);

But it didn't work. I'm not sure if it is because jCanvas doesn't support module import by default? I doubt it.

Really looking forward to getting this to work :D.

[microkof]

You can try this method:

import $ from 'jquery';
import jcanvas from 'jcanvas';
window.$ = $;
jcanvas($, window);

It works in Vue Cli project.

[afunworm]

import $ from 'jquery';
import jcanvas from 'jcanvas';
window.$ = $;
jcanvas($, window);

Hi.

I really appreciate your patience. That works perfectly and I am really happy I can move on with the project.

I have 2 more questions:

- When I use `addLayer({ type: 'image', height: 100, width: 100 })`, is there a way to make it fit to the size of the the given height & width (resize to fit)?
- Is there a way to draw an image from part of an image (sprite)?

Thank you again for all your help!!!!

[microkof]

import $ from 'jquery';
import jcanvas from 'jcanvas';
window.$ = $;
jcanvas($, window);

Hi.

I really appreciate your patience. That works perfectly and I am really happy I can move on with the project.

I have 2 more questions:

- When I use `addLayer({ type: 'image', height: 100, width: 100 })`, is there a way to make it fit to the size of the the given height & width (resize to fit)?
- Is there a way to draw an image from part of an image (sprite)?

Thank you again for all your help!!!!

First question, the premise of using jcanvas is to set a clear width and height for the canvas. According to the width and height, you can set the width and height of the image for .drawImage(). I don't think this is a problem.

If you mean the ratio of width to height is not appropriate, and you want to maximize the clipping, I don't think you should make such complicated demands on jcanvas. You should clip the image to the right size in advance.

Second question, https://projects.calebevans.me/jcanvas/docs/images/#cropping is your solution?

[afunworm]

import $ from 'jquery';
import jcanvas from 'jcanvas';
window.$ = $;
jcanvas($, window);

Hi.
I really appreciate your patience. That works perfectly and I am really happy I can move on with the project.
I have 2 more questions:

- When I use `addLayer({ type: 'image', height: 100, width: 100 })`, is there a way to make it fit to the size of the the given height & width (resize to fit)?
- Is there a way to draw an image from part of an image (sprite)?

Thank you again for all your help!!!!

First question, the premise of using jcanvas is to set a clear width and height for the canvas. According to the width and height, you can set the width and height of the image for .drawImage(). I don't think this is a problem.

If you mean the ratio of width to height is not appropriate, and you want to maximize the clipping, I don't think you should make such complicated demands on jcanvas. You should clip the image to the right size in advance.

Second question, https://projects.calebevans.me/jcanvas/docs/images/#cropping is your solution?

Hi.

The crop does solve my problems.

For my #1 question, I am running into a weird scenario.

I have a canvas with width: 510px; height: 753px and I a background layer to it:

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

As you can see, the background is set to the exact height & width of the canvas. However, it doesn't draw the same background that fits the canvas. You can take a look at it here.

Please advise.