I need to draw an image onto a canvas. I then need to draw a box outline on top of part of the image. I have a canvas already working in my app, and am able to draw a rectangle onto it. However, I am having problems drawing the image onto it first. I create the image object from file source like this:
const img = new Image(200, 200); img.src = (<any>window).Ionic.WebView.convertFileSrc(path); this._CONTEXT.drawImage(img, 0, 0); this._CONTEXT.fillRect(100, 100, 400, 400);
This draws the rectangle, but not the image. No errors are showing in the debug console. Ideally, I need to drawn the image at its original dimensions, draw the rectangle over the full sized image, then scale the canvas to fit the screen. Does anyone have an example I can work from?
Another related side issue - when creating image object from file, how do I get the image dimensions?
Thanks for any help.