Canvas & Ionic - how to solve an issue

Ionic Framework ionic-v3
1

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!

2

ng2-img-tools is your friend.

3

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)?

4

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

https://www.html5rocks.com/en/tutorials/canvas/hidpi/