how to pixelate "smooth" canvas image

Question

I'm trying to make a function that will take a few pictures and make a collage type thing for a background. I've been trying to use the HTML 5 <canvas> but have had no luck. I have various images each being 16x16 pixels. When I tried to add them to the canvas, they became very "smooth" but I need them to be pixelated. They also appear larger than i would expect for something 16 pixels large. I have done research on this, but no results seem to be working. Should I keep using canvas for this or is there a better/easier way?

This is the JavaScript i used:

var bg = document.getElementById("background".getContext("2d");
var img1 = new Image();
var img2 = new Image();
    //etc...
img5.onload = function(){
    bg.drawImage(img1,0,0,16,16);
    bg.drawImage(img2,0,16,16,16);
        //etc...
}
img1.src="1.jpg";
img1.src="2.jpg";
    //etc...

P.S. Im sure this code is horribly inefficient, but i will clean it up later.

Ken Fyrstenberg wrote some nice code to pixelate an image on this Stackoverflow post: http://stackoverflow.com/questions/19129644/how-to-pixelate-an-image-with-canvas-and-javascript/19129822#19129822 — markE, Oct 07 '14 at 21:28

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

0

Your problem is probably the render of a scaled canvas element.

Check for solutions here: Disable Interpolation when Scaling a <canvas>

edited May 23 '17 at 11:57

Community

1
1

answered Oct 07 '14 at 22:07

GramThanos

3,572
1
22
34

I've tried this multiple times, it dosen't work, I'm using the latest version of chrome and lots of people say that it does. – Ozay34 Oct 08 '14 at 21:28
Please post an demo so that we can help more. – GramThanos Oct 08 '14 at 21:32

how to pixelate "smooth" canvas image

1 Answers1