loading...

Why does browsers f***ing hate the anti-aliasing of images, am I really that bad?

calin92540842 profile image PDS OWNER CALIN (Calin Baenen) ・1 min read

I know I've asked before, but how can I anti-alias an Image, this is the css I have in place:

/* Restyle every element so that they are in an absolute position */
* {
    position:absolute;
    top:0;
    left:0;
    font-family:"Press Start 2P"; !important
    image-rendering:crisp-edges; !important
}

/* Set the body's background-color to black so the white canvas sticks out */
body {
    background-color:black;
    overflow:hidden;
    cursor:url("resources/textures/souls/normal.png") auto;
}

/* Make all canvas elements have a white bg by default */
canvas {
    background-color:white;
}

/* Hide all img elements (for obvious reasons) */
img {
    display:none;
    image-rendering:pixelated;
    image-rendering:crisp-edges;
    image-rendering:-moz-crisp-edges;
    image-rendering:-o-crisp-edges;
    image-rendering:-webkit-optimize-contrast; !important
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering:-webkit-optimize-contrast;
}

/* Stop cursor from appearing on windows */
canvas {
    cursor:none;
    image-rendering:pixelated; !important
    overflow:hidden;
}

div {
    cursor:none;
}

and here's a sample of the JS:

ctx.imageSmoothingQuality = "low"
ctx.imageSmoothingEnabled = false
ctx.webkitImageSmoothingEnabled = false
ctx.mozImageSmoothingEnabled = false
ctx.msImageSmoothingEnabled = false



Am I really this fucking bad!?


Seriously though, let's address the issue, what's going wrong, why do browsers seem to be putting so much effort into depixelizing my pixel art?


I've followed all the tutorials I've seen online...
Is there really something I'm missing?

How big or small is it really, and why won't what I have currently work, despite tutorials saying otherwise?

Thanks!
Cheers!

Posted on Mar 4 by:

calin92540842 profile

PDS OWNER CALIN (Calin Baenen)

@calin92540842

I am a 13 (as of Oct 30 of 2019) yr/o developer (I have been developing mini-projects for 4, years now, since I was 9), who makes projects in languages like: Java, HTML, Python 3, JS, CSS, and C#.

Discussion

markdown guide
 

Have you tried setting the size of the element to the size of the image so the browser doesn't scale it?

 

But the browser scales it either way... I've tried that method... And still, a blurry effect...

 

Can you make a Codepen containing your code?

codepen.io/

Make a "pen" and paste your game's code. Then import your images from a source such as Imgur.

codepen.io/calin92540842/pen/BaNwLOz

(Could not import the image, it won't work, this is the image I'm trying to use: RUNTDEALE LOGO)

Upload your images to imgur.com and replace the URLs in your code with the URL of it on imgur.

Imgur won't give me a 7 digit code, no matter how many times I click resend... Has this issue happened before? how can I fix it?

Well this really sucks, I put in my phone number, right?
I press I'm not a robot, press resend (after waiting a minute), and NOTHING...

But hey... It wouldn't be real life if even an easy-seeming task, like signing up for a website was easy, huh?

 

!important goes before semicolon (;)

Only one value will work from the list (the last one)

img {
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  image-rendering:-moz-crisp-edges;
  image-rendering:-o-crisp-edges;
  image-rendering:-webkit-optimize-contrast !important;
}