Question:

I want to simulate effect of old pc low resolution like atari or commodore in webgl is there a way to draw image and then some how make pixels bigger ?

I'm new to webgl so how should I start doing this effect?

I found this there is mosaic effect but it usses three.js and i want to do it without frameworks.

Answer:

There are many ways to do it. The easiest is just to render to a low res texture by attaching it a framebuffer and then render that texture to the canvas with texture filtering set to NEAREST.

Here's a sample. It's using TWGL which is not a framework, just a helper to make WebGL less verbose. See comments (and docs) if you want to translate it to verbose raw webgl.

If you're new to webgl I'd suggest starting here

It's also common to render to a texture (like above) but a higher resolution texture, then filter it down using a shaders, mips, and/or linear filtering. The advantage being you'll get more anti-aliasing

update

In 2020 possibly the easiest thing you can do is just make a canvas the resolution you want, for example 32x32 and set it's CSS size to be larger and then use the image-rendering: pixelated CSS setting to tell the browser not to smooth it as it scales the image

<canvas 
    width="32"
    height="32"
    style="
        width: 128px;
        height: 128px;
        image-rendering: crisp-edges; /* for firefox */
        image-rendering: pixelated;   /* for everything else */
    "></canvas>