Question 191200 in Html Question posted in
Some basic documentation can be found here.

How to resize image in html5 canvas without loss of quality?

I have a 1000x1000px image on a canvas of the same aspect ratio on my web system. The problem is that on mobile my canvas is 200px (due to responsiveness) and when I resize the image to fit the canvas it loses a lot of resolution. I tried to generate a new smaller image from the original in corel draw, but the problem persisted.

Tags:

2

Answers


  1. 0

    You can use a raster-to-vector converter for your background image. That will make it look better for scaling and changing the image’s extension to svg. After that use this image in your CSS file:
    .container { background-image: url(/images/image.svg); }

    Login or Signup to reply.
  2. 0

    Actually you should consider pixel ratio. On desktop this value is usually 1 but on mobile this value is larger. This means that if your pixel ratio is 2, and screen width is 200, you should set canvas and image width to 400.

    You can get the value using this:

    window.devicePixelRatio

    You also can open this codepen on your mobile device (see ratio parameter) just to check.

    You also can use tiny library canv to make all work with canvas much easier.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search