Android version of app displays all colors as black


#1

I currently have an Ionic 2 app that draws a floor plan of a building onto a canvas and then, in another method, takes that same canvas and draws rectangles representing printers onto it. (Code below)

I have multiple pages in my app that have similar functionality that draw other resources. All of these resources use different colors, blue, red, green, etc. When I test the app in Ionic View on an iPhone, the colors all come out correctly. However, in Android, they all come out to black. (Screenshots at bottom). Does anyone know whether this is an Ionic bug, or something that I need to fix myself?

showFloor(floor_number: number) {
    // Set title of page
    document.getElementById("floor_name").innerHTML = this.plan_names[floor_number];

    // Create then adjusts the height and width of the canvas element
    let canvas = <HTMLCanvasElement>document.getElementById('canvas');
    let img = this.images[floor_number];
    canvas.height = img.width;
    canvas.width = img.height;

    // Create a context from the canvas, which it moves and rotates before drawing the floor plan onto it
    let ctx = canvas.getContext("2d");
    ctx.translate(canvas.width,0);
    ctx.rotate(90*Math.PI/180);
    ctx.drawImage(img,0,0);
}

lowerLevelPrinters() {
    let canvas = <HTMLCanvasElement>document.getElementById('canvas');
    let ctx = canvas.getContext("2d");
    ctx.fillStyle = "0000FF";
    ctx.fillRect(800, 600, this.square_size, this.square_size);
    ctx.fillRect(1425, 1230, this.square_size, this.square_size);
  }

iOS:


Android:


#2

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Chrome dev tools: https://ionic.zone/debug/remote-debug-your-app#android Look at the console and network tabs for errors.