Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

how to make pixel art non blurry on canvas export?

Explorer ,
Jan 02, 2018 Jan 02, 2018

Pixel art can export with a resized canvas (as is the tried and tested way of Flash since the old days) crisply, like so:

Screen Shot 2018-01-02 at 18.49.24.png

But since browsers no long support .swf, we are limited to Canvas export, however, the same resized canvas output looks like this:

Screen Shot 2018-01-02 at 18.49.56.png

It would be nice if images set to not allow smoothing, were outputted without bilinear upscale filtering in Canvas for use with pixel art contents.

1.6K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Jan 02, 2018 Jan 02, 2018

That doesn't help, it's for snapping things at author time to the nearest pixel. It doesn't stop CreateJS from adding antialiasing to your sharp jaggy bitmaps at runtime. What would work is a CreateJS version of:

stage.quality = "low";

Found a page that helped to get a solution:

ctx = canvas.getContext("2d");

ctx.imageSmoothingEnabled = false;

Translate
Community Expert ,
Jan 02, 2018 Jan 02, 2018

Does the Snap Bitmaps to Pixels option help?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 02, 2018 Jan 02, 2018

sadly not, that's only for layout

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 02, 2018 Jan 02, 2018

That doesn't help, it's for snapping things at author time to the nearest pixel. It doesn't stop CreateJS from adding antialiasing to your sharp jaggy bitmaps at runtime. What would work is a CreateJS version of:

stage.quality = "low";

Found a page that helped to get a solution:

ctx = canvas.getContext("2d");

ctx.imageSmoothingEnabled = false;

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 02, 2018 Jan 02, 2018
LATEST

Thanks, that worked a treat!

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines