accidental gradient canvas trick

I was using p5's createImage function to create a teeny tiny image, 2 pixels by 2 pixels, in order to test out a function to sort colors of each pixel.

function setup() {
	createCanvas(400, 400)
	noLoop()
}

function draw() {
	let img = createImage(2, 2)
	img.loadPixels()

	img.set(0, 0, color(255, 0, 0, 255))
	img.set(1, 0, color(255, 0, 255, 255))
	img.set(0, 1, color(0, 255, 255, 255))
	img.set(1, 1, color(0, 0, 255, 255))

	img.updatePixels()

    image(img, 0, 0, width, height)
}

What I expected with the last call to image was that the image would be drawn (zoomed in) with clear delineations between each pixel, like this:

In reality it ended up looking like this:

This behavior is pretty simple to turn off by simply adding a noSmooth() in the setup function, but it was a sort of neat surprise to see the image appear this way at first!

I'm curious if something similar would happen using the Canvas API without the layer of p5 over it. This might be a good place to start - pixel manipulation with canvas on MDN.