CODEWITHSUNDEEP
javascripthtmlcanvasimage-resizing
jayarjo
jayarjo

Reputation: 16756

What is the algorithm used by html5 canvas to resize images?

In general final quality is pretty decent unless there are some very subtle details in the image, like hair for example. Then downsized image results to an over sharped version of itself. What is the default algoritm used by canvas for image resizing?

Is there a way to achieve a better result?

Upvotes: 3

Views: 642

Answers (2)

jayarjo
jayarjo

Reputation: 16756

According to test results and scattered information around the web, currently canvas uses Nearest Member. Although specs do not force any specific algorithm. There was a talk in Mozilla about switching to Bilinear instead, but it seems that it wasn't yet implemented in browser.

Upvotes: 2

Jarrod
Jarrod

Reputation: 9465

You generally just use drawImage to resize an image on the canvas. Here is an example from Mozilla:

// Width and height is the image's size on the target canvas.
drawImage(image, x, y, width, height)

For more examples, see here; in particular the "Slicing" section.

Upvotes: -1

Related Questions