Canvas & Ionic - how to solve an issue

Hey guys,

I have an ionic app, similar to snapchat, where users can take a pic (using ionic native camera), add text, draw smth over, add icons / images etc.

This is implemented with a help of canvas. The width and height of canvas are set to this.platform.width() / height().

The workflow is the following:

  1. User takes a pic
  2. Pic is resized using canvas
  3. Pic is placed on new canvas as a background property

If I do not resize the pic and place it as a background, only part of the pic is shown on the screen.
If I resize a pic and make the size equal to canvas’ size, then the quality of the pic is really bad (blurred).

I do not know why I am not able to set any kind of background-size: cover properties to canvas to shrink the background pic, it simply doesn’t work.

Thanks in advance!

ng2-img-tools is your friend.

Thank you!
But why if I call this.platform.width, it gives me 360, but not 1440 as my screen resolution (Samsung Galaxy S6 Edge)?

That’s the resolution your browser is emulating. Standard with all densely packed pixel devices, pretty much every phone and tablet since 2013.