0

Do anyone now how you get the context of the a-frame aer.js canvas? in the dev mode of google chrome i can see a-canvas class but no id to get the context by id.

<canvas class="a-canvas" data-aframe-canvas="true" width="1920" height="1440" style="width: 1536px; height: 1152px;"></canvas>

I would like to have something like var ctx = canvas.getContext('2d'); I am using a-frame with angular 6. When I do it with

const canvas2: HTMLCanvasElement =  document.querySelector(".a-canvas");
const ctx=canvas2.getContext('2d');

the const ctx is always null

Reto Fricker
  • 11
  • 1

1 Answers1

0

a-frame has a webgl context, not a 2d one. You can grab the webgl context with:

canvas.getContext('webgl')

You can grab the a-frame canvas by its class

<canvas class="a-canvas" ....>

..

var canvas = document.querySelector(".a-canvas")

ar.js creates a <video> element with the camera feed, you can simply do 
var feed = document.querySelector("video")

Make sure that the scene is fully loaded when you try to access it. From the docs:

// scene - scene reference (this.el.sceneEl, queryselector(a-scene)
scene.addEventListener('loaded', (e)=> {
  // code here
}

(or just set a timer)

fiddle here.

Piotr Adam Milewski
  • 14,150
  • 3
  • 21
  • 42