drawImage() rendering blurry images

Question

unzoomed

zoomed

I have read 5+ other questions on this and they are all different from mine, because I am drawing more than one image, and because I set the width and height of my canvas in my html and not my css.

<canvas id="myCanvas" width="480" height="320"></canvas>

This is how I am drawing my images (I am making a chess game)

function piece(color, piece, square, pieceId){
    this.dragging=false;
    this.color=color;
    this.piece=piece;
    this.square=square;
    this.moveCount=0;
    this.pieceId = pieceId;
    this.captured = false;
    this.firstMove;
    this.xCoord=square.x+(spaceWidth/2-8);
    this.yCoord=square.y+(spaceHeight/2-8);
    this.drawPiece = function(){
        if (this.color == 'w') {
            // need to get rid of these magic numbers don't really know what i am doing
            if (this.piece == 'p') {
                loadImage("img/whitepawn.png", this.xCoord-4, this.yCoord-3);
            } else if (this.piece == 'b') {
                loadImage("img/whitebishop.png", this.xCoord-4, this.yCoord-3);             } else if (this.piece == 'kn') {
                loadImage("img/whiteknight.png", this.xCoord-4, this.yCoord-3);             } else if (this.piece == 'r') {
                loadImage("img/whiterook.png", this.xCoord-4, this.yCoord-3);
            } else if (this.piece == 'k') {
                loadImage("img/whiteking.png", this.xCoord-4, this.yCoord-3);
            } else if (this.piece == 'q') {
                loadImage("img/whitequeen.png", this.xCoord-4, this.yCoord-3);              }
        } else if (this.color == 'b') { // black piece
            // need to get rid of these magic numbers don't really know what i am doing
            if (this.piece == 'p') {
                loadImage("img/blackpawn.png", this.xCoord-4, this.yCoord-3);
            } else if (this.piece == 'b') {
                loadImage("img/blackbishop.png", this.xCoord-4, this.yCoord-3);             } else if (this.piece == 'kn') {
                loadImage("img/blackknight.png", this.xCoord-4, this.yCoord-3);             } else if (this.piece == 'r') {
                loadImage("img/blackrook.png", this.xCoord-4, this.yCoord-3);
            } else if (this.piece == 'k') {
                loadImage("img/blackking.png", this.xCoord-4, this.yCoord-3);
            } else if (this.piece == 'q') {
                loadImage("img/blackqueen.png", this.xCoord-4, this.yCoord-3);              }
        } else {
            ;
        }
    }
}

function loadImage( src, x, y) {
    var imageObj = new Image();
    imageObj.src = src;
    imageObj.onload = function() {
        ctx.imageSmoothingEnabled = false;
        ctx.drawImage(imageObj, x, y, 25, 25);
    };
}

Does anyone know what I am doing wrong? I have been trying to figure this out all day, and could use some help.

Could you provide an [mcve] with e.g only one of these images ? (you can upload it on stackoverflow's imgur account). On which browser do you experience this issue (some still have a prefixed version of imageSmoothingEnabled. — Kaiido, Apr 07 '17 at 01:03
Is there a way to get the images files img/*.png that are to be displayed, so that I can test this on my laptop ? — WeHumLove, Apr 07 '17 at 01:03
Yes, let me try to figure out how to do the imgur thing, and also I am using chrome. Just tried in safari and it still looks bad though — Leedle, Apr 07 '17 at 01:16
First thing that occurs to me is, are the positions whole integers? I believe the canvas will try to render sub-pixel if positions and/or sizes are not whole ints. — Clonkex, Apr 07 '17 at 01:23
It looks like I can only upload them to the post one at a time. All of the images are here https://github.com/Kyle628/Wizard_Chess/tree/pawns-luke-branch/img — Leedle, Apr 07 '17 at 01:23
oh no they are not whole integers, let me try taking the floor or ceiling or something! — Leedle, Apr 07 '17 at 01:24
Dangit, I thought that was going to work for sure. No luck =/ — Leedle, Apr 07 '17 at 01:27
@KyleO'Connor Do you have a screenshot of what you're seeing? — Clonkex, Apr 07 '17 at 01:33
I downloaded your game from your github and I'm seeing quite sharp-edged images, unless I zoom in. Can you give us another screenshot without the zoom plsplspls? Also, I'm on Windows. Maybe it's a weird thing with Chrome on Mac? Not that that really helps you, but it might be useful to know. — Clonkex, Apr 07 '17 at 01:53
I do have an idea but I want to see what you're seeing first. — Clonkex, Apr 07 '17 at 01:54
Okay thank you for taking time to help me! I uploaded an unzoomed screenshot. I am on a mac, and I saw on another post people were talking about retina displays...hmm — Leedle, Apr 07 '17 at 02:04
That is a retina display (if the unzoomed image is not scaled by you) you need to double the canvas size or use the CSS rule "image-rendering: pixelated;" to stop the blurring due to canvas bilinear filtering. Some related answers http://stackoverflow.com/a/41776757/3877726 http://stackoverflow.com/a/39951701/3877726 — Blindman67, Apr 07 '17 at 02:52
@Blindman wow that worked! Had to double the size of the canvas and add ctx.scale(2,2).....if you want to post an answer I will mark it accepted answer — Leedle, Apr 07 '17 at 03:13
Awesome, glad you got your answer! For the record, my idea was going to be to try making the chess piece images much smaller, preferably the exact size they will be when you draw them to the canvas. I was wondering if maybe Chrome was deciding to filter the images on Mac only... either way they may look better if they're not being resized from 1000px down to 25px :P — Clonkex, Apr 07 '17 at 03:34
@KyleO'Connor if you want to give an upvote just give to one of the links provided if they helped at all, else all good that you got your problem fixed. Have fun writing the chess game :) — Blindman67, Apr 07 '17 at 04:03

score 0 · Answer 1 · edited May 23 '17 at 11:46

Your problem probably comes from the interpolation that the browser does when you draw your images.

Unfortunately there is no standart way of undoing this.

Here is a question with some maybe helpful clues: Disable Interpolation when Scaling a <canvas>

An easier, uglier fix might be to use higher resolution imagaes (scale them up in your favourite image processing tool and choose closest as the interpolation setting).

drawImage() rendering blurry images

1 Answers1