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:
