Android: A canvas inside a local webview has the wrong height if it is specified using percentages (i.e. 100%)

I have searched and made sure there are no existing issues for the issue I am filing

[X] I have searched the existing issues

Description

NOTE: Maybe this issue is not directly related to Titanium SDK but to the Canvas - HTML5 framework.

A canvas within a local webview is not sized correctly if its size is specified as a percentage. This applies both to settings via CSS and to the height and width attributes of the canvas itself.

<body>
 <style>
  body {margin: 0 0;padding: 0 0;}
  canvas {margin: 0 0;padding: 0 0; width: 100%; height:100%; background-color: blue;}
 </style>
 <canvas id="plot2d" width="100%" height="100%"></canvas>
</body>

FIXING WORKAROUND: Programmatically set the dimension of the canvas in pixels.

<script>
 const canvas=document.getElementById('plot2d');
 function rCnv() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  drawStuff();
 }
 rCnv();
 window.addEventListener('resize', rCnv, false);
</script>

If you are using the Chart.js plugin instead use:

<script>
 const canvas=document.getElementById('plot2d');
 const chart = new Chart(canvas.getContext('2d'), {} );
 function rCnv(){
  chart.resize(window.innerWidth,window.innerHeight);
 }
 rCnv();
 window.addEventListener('resize', rCnv, false);

while setting maintainAspectRatio and responsive to false inside the chart options:

options: {
 responisve: false,
 maintainAspectRatio: false

Expected Behavior

Canvas sizes correctly

Actual behavior

Height is reduced or the canvas looks like a square, same height as width!

Reproducible sample

Steps to reproduce

Platform

Android

SDK version you are using

12.4.0.GA

Alloy version you are using

No response

tidev / titanium-sdk