CODEWITHSUNDEEP
javascripthtmlcanvas
noio
noio

Reputation: 5812

How to disable smoothing on outer edges of JS Canvas?

I'm drawing one canvas' contents to another, using context.drawImage.

I've managed to disable smoothing (antialiasing) using imageSmoothingEnabled = false on Chrome 30, but the outer bound of the image is still smoothed. Is there a way to disable that too?

Have a look at the fiddle and image below. The inner rectangle is nicely jagged, but the outside isn't.

http://jsfiddle.net/VzX4Q/2/

Upvotes: 0

Views: 1073

Answers (1)

user1693593
user1693593

Reputation:

What you are observing is two separate processes combined into the result you see.

The processing of scaling an image itself is separate from transforming it.

This means that the image, in this case the source canvas, is scaled (if needed) and only then do the imageSmoothingEnabled apply.

From the official canvas document (editor's draft) (my emphasis):

If the imageSmoothingEnabled attribute is set to true, then the user agent may use any filtering algorithm to smooth the image data when it is scaled..."

and in this section:

context . imageSmoothingEnabled [ = value ]

Returns whether pattern fills and the drawImage() method will attempt to smooth images if they have to rescale them, as opposed to just rendering the pixelated images.

Then there is the transformation matrix which will transform everything using smoothing as it's only aware of the relationship between the source pixel position and destination pixel position no matter what the source is generated by. So even if the image itself is drawn without any smoothing its resulting pixels are target for smoothing in the transformation stage (you can also see this with any transformations).

To accomplish this with no smoothing at all you would manually need to implement transformation yourself. It's not so hard per se but the performance cost is relatively high compared to doing it with the internal transformation.

Under special condition you might be able to filter away pixels based on their values and a threshold but performance will take a hit in both cases as you need to iterate over the pixels using JavaScript.

In this case however it may or may not be a bug as the image's interior is (apparently) not smoothed while it's boundary is. The bug would be related to the image not being smoothed however as it's suppose to only smooth the image when it's being scaled (if I am able to interpret the document correctly but also based on how "scaling" is defined).

Upvotes: 3

Related Questions