title: HTML5 Canvas element not appear in compiled Android Ionic but works in browser 'Ionic Serve'
body: <p>I used face-api.js in my Ionic 4 project to detect face from camera stream. however the detection canvas only works in browser <code>ionic serve</code> and not working after i compiled it into Android apk. I can see all my models loaded in Android debug console but none of the <code>&lt;canvas&gt;</code> appended into my html. where did i do wrong?</p>
  
  <p><strong>page.html</strong></p>
  
  <pre><code>&lt;ion-row&gt;
    &lt;ion-col class="ion-text-center" size="12"&gt;
      &lt;div #videoContainer&gt;&lt;/div&gt;
      &lt;div&gt;
        &lt;canvas id="canvas" width="640" height="480"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
  &lt;ion-col&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>page.ts</strong></p>
  
  <pre><code>  videoLoad() {
      this.elementRef.nativeElement.querySelector('video')
        .addEventListener('play', async () =&gt; {
  
          const labeledFaceDescriptors = await this.loadLabeledImages()
          const faceMatcher = new faceapi.FaceMatcher(labeledFaceDescriptors, 0.6)
  
          const displaySize = { width: this.video.width, height: this.video.height }
  
          const canvas = &lt;HTMLCanvasElement&gt;document.getElementById('canvas')
  
  
          faceapi.matchDimensions(canvas, displaySize)
  
          await faceapi.nets.tinyFaceDetector.loadFromUri('https://www.test.com/models');
          await faceapi.nets.faceLandmark68Net.loadFromUri('https://www.test.com/models');
          await faceapi.nets.faceRecognitionNet.loadFromUri('https://www.test.com/models');
          await faceapi.nets.faceExpressionNet.loadFromUri('https://www.test.com/models');
          await faceapi.nets.ssdMobilenetv1.loadFromUri('https://www.test.com/models');
  
          setInterval(async () =&gt; {
  
            const detections = await faceapi.detectAllFaces(this.video, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceDescriptors().withFaceExpressions()
            const resizedDetections = faceapi.resizeResults(detections, displaySize)
  
            const results = resizedDetections.map(d =&gt; faceMatcher.findBestMatch(d.descriptor))
  
            const ctx: CanvasRenderingContext2D = canvas.getContext("2d")
  
            ctx.clearRect(0, 0, canvas.width, canvas.height)
            results.forEach((result, i) =&gt; {
              const box = resizedDetections[i].detection.box
              const drawBox = new faceapi.draw.DrawBox(box, { label: result.toString() })
              if (result.label == 'unknown') {
  
              } else {
                console.log(result.label);
              }
              drawBox.draw(canvas)
            })
          }, 800)
        })
    }
  </code></pre>