1

I'm trying to create a polygon that has un-antialiased, unfeathered, unsoftened, etc. edges/sides. My goal is to have a polygon that has visible pixelated edges like an old-school game would. I found that images do not use antialiasing with proper settings, but I'd like to use lineTo and paths to create the polygon (because I need to be able to change the colors etc).

Using scaling (setting the canvas size one fourth of the actual size and scaling the canvas up with CSS styling), translating the shape by 0.5 pixels and setting the image-rendering property to pixelated results in this:

https://jsfiddle.net/6gbo7x3g/4/

Even though the result is better than without the tricks, you can still see antialiasing. The browser support isn't great either, as pixelated image rendering isn't supported in Safari. Here is a screenshot from Chrome of the canvas above:

image of antialiased polygon

How can I create a polygon (that has diagonal edges) un-antialiased? There will be multiple similar polygons, so drawing every pixel by hand would be too resource-intensive.

Questions like How can I keep the edge pixels of lines from being semi-transparent?, stackoverflow.com/a/45749684/1693593 and stackoverflow.com/a/18551803/1693593 aren't duplicates, because they only apply to scenarios where pixel-by-pixel rendering is applicable (in this scenario it is too resource-intensive). I asked this question, because other questions date almost four years back, and surely the web standards have changed since then.

Johan
  • 11
  • 2
  • @K3N this isn't a duplicate. Two of the answers you linked were relevant to my issue and neither of them have an actual solution applicable for my scenario: pixel-by-pixel rendering is not an option (like both of the answers say to do). Also, both of the answers date four to five years ago: the web standards have to have changed since then? – Johan Mar 19 '18 at 04:55
  • @Johan yes there are newer ways to do it: https://stackoverflow.com/questions/4261090/html5-canvas-and-anti-aliasing/49357655#49357655 – Kaiido Mar 19 '18 at 07:22
  • @Kaiido thanks for the link, it seems like Chrome supports it but I'd need Safari support for it too... Are there polyfills or similar for the filter property? – Johan Mar 19 '18 at 08:07
  • @Johan, I don't know any no... Actually the only convoluted way I can think of would imply drawing your canvas in an svg element on which you would apply the filter and then draw back this svg element on your canvas... This would probably work because Safari does actually support SVG filters and CSS ones, they just don't support the canvasContext2D one yet. – Kaiido Mar 19 '18 at 08:25
  • @Kaiido makes sense. Tried searching for the canvas filter property support on Safari WebKit's bugtracker and roadmap, but I couldn't find any. I'll try to make a wrapper for first rendering the objects as SVG (on Safari) and then on canvas. Thanks! – Johan Mar 19 '18 at 08:28

0 Answers0