From 2d400a1995378254c93d0951198036f5d320c569 Mon Sep 17 00:00:00 2001 From: Yoan Blanc Date: Tue, 25 Apr 2017 11:15:56 +0200 Subject: [PATCH] Force a pixelated rendering of the canvas. It's easier to see the antialiasing glitch at step 5. For now it does a real difference on Chromium rather than Firefox. - http://caniuse.com/#feat=css-crisp-edges - https://bugzilla.mozilla.org/show_bug.cgi?id=856337 Signed-off-by: Yoan Blanc --- src/assets/platformer/css/styles.css | 8 ++++++++ src/assets/platformer/index.html | 9 ++------- 2 files changed, 10 insertions(+), 7 deletions(-) create mode 100644 src/assets/platformer/css/styles.css diff --git a/src/assets/platformer/css/styles.css b/src/assets/platformer/css/styles.css new file mode 100644 index 0000000..11618e9 --- /dev/null +++ b/src/assets/platformer/css/styles.css @@ -0,0 +1,8 @@ +canvas { + margin: 0 auto; + + image-rendering: -moz-crip-edges; + image-rendering: -webkit-optimize-contrast; + image-rendering: -o-crisp-edges; + image-rendering: pixelated; +} diff --git a/src/assets/platformer/index.html b/src/assets/platformer/index.html index 61fe088..398821a 100644 --- a/src/assets/platformer/index.html +++ b/src/assets/platformer/index.html @@ -1,16 +1,11 @@ - + HTML5 games workshop: One-screen platformer + - -