Nothing drawn on canvas

[Mwni]

What could be the cause for the canvas remaining blank after calling draw functions? The setup is the core example given in the readme.

• xmlns:canvas set on page tag
• canvas is there, its bounds push other content lower
• ready event fires and the canvas aswell as the ctx of the event are present

This is on Android emulator, I will try iOS tomorrow.

[triniwiz]

Can you try wrapping the draw call in a setTimeout on android ? 🤔

[Mwni]

I did, to no avail

[Mwni]

Do I need to somehow install the native code for android? I ran ns plugin add @nativescript/canvas to install, sufficient?

[Mwni]

For iOS I sadly cannot test it because:
None of your spec sources contain a spec satisfying the dependency: CanvasNative (~> 0.9.19)
Do I need to compile the pod myself?

[triniwiz]

@Mwni fixed iOS there was plans to release a new pod but sadly I did not so the package had the wrong version update to 0.9.21 as for android I will fix also can you try webgl an lmk if it draws

let gl;
let canvas;
export function canvasReady(args) {
	console.log('canvas ready');
	canvas = args.object;
	gl = canvas.getContext('webgl'); // 'webgl' || 'webgl2'
	gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
	// Set the clear color to darkish green.
	gl.clearColor(0.0, 0.5, 0.0, 1.0);
	// Clear the context with the newly set color. This is
	// the function call that actually does the drawing.
	gl.clear(gl.COLOR_BUFFER_BIT);
}

[Mwni]

The pod version 0.9.21 was not available, but 0.9.18 was, so the install worked, and the canvas did draw on iOS. Just as well did the WebGL context on android. So this could come down to some niche bug regarding my specific environment (Windows 7 Android emulator). triniwiz, thank you for looking into this. At this point I am perfectly able to continue developing my app.

[triniwiz]

Okay so the gl context drew fine on both platforms ? Then it would be on my end to fix for android also that package version is the npm package not a pod

[Mwni]

Yes, gl worked fine. For 2d context on android, I have not tested it on an actual android device, I will let you know once I have, but I'm assuming it will work there. On a tangent, I did not find where I can specifically fund this development, would it be through the OpenJS foundation?

[triniwiz]

You can fund it through github sponsors or opencollective

[JacobFJ]

@triniwiz For android it working 2d but the canvas is broken layout it look like I draw a circle the result is cicle with broken it look like house tiles

[triniwiz]

@HakobiDev can you share a screenshot please

[OzymandiasTheGreat]

Re: rendering broken on Android. Here's the screenshot

And here's the code behind that view

onReady(event: any): void {
    const canvas: Canvas = event.object;
    const ctx = <CanvasRenderingContext2D> canvas.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.scale(0.3, 0.5);
    ctx.fill();
  }

The white part is normally noise, but I have a non-attached canvas with a white background created as well and it somehow crosses over into the displayed canvas.

Sorry, if I should've opened a new issue, it's just that the last comment is describing this exact issue I think.

Oh and also, nativescript is version 8.0.2. Everything's as up to date as possible.

[triniwiz]

Can you try updating to the latest alpha tag , also I added a new property to help with scaling ignorePixelScaling="true" you can also try it

[JacobFJ]

@triniwiz thanks! I will also check it out.

[OzymandiasTheGreat]

Just tried the latest alpha. The rendering is still broken. Noise is now replaced by black squares and it still tiles for some reason rather than displaying drawn image normally.

[triniwiz]

@OzymandiasTheGreat real device or emulator ?

[OzymandiasTheGreat]

Real device running android 10. My machine doesn't handle the emulator well.

[triniwiz]

Please try with the latest , reopen if the issue still persists