Hey guys,

I've been using the HTML5 canvas API for a long time, and I've noticed a problem with loading images, drawing lines, etc: depending on the browser, there is always some blurring / anti-aliasing / smoothing going on and (according to several Stack Overflow posts) nothing that can be done about it.  But in the retro style games I like to play and build, you actually want the clean, crisp, and sometimes even pixelated images that were common on those old screens.  And I've seen several emulators that have achieved this, but haven't been able to figure out how.  So I created a little library on top of canvas where you set "pixel" (scaled rectangle) colors individually.  This fixes the blurring problem (mostly), and is not as awful as it sounds to code (lol), but it can really only do about 160x144 (the resolution of the Game Boy) before it starts to have little lines around each rectangle (which sometimes leaves a trail behind some animations); in the attached image, the ship on the right is with the canvas at 160x144 and the one on the right (with the weird lines) is at 320x200.  I haven't hit any performance issues yet, but I expect on less "beefy" computers there would be.

Anyway there's way too much code here to give you some examples, but I did find someone who tried something similar.  In fact, mine is basically based on his, so here's the link to that: http://www.geekonskates.com/apps/lights/

But my question is a bit more general: How do the emulators do it?  They're able to emulate not only the graphical display, but also the sound, and even the code - they can run the ROMs like the original systems, and are not bloated or glitchy, so I'm guessing there's a library somewhere that I just don't know about yet.  Or do they just use WebGL?  I know C well but haven't messed with OpenGL, but that's just because (from what I've read) Open/WebGL are primarily for 3D.  To me it sounds like shaders and textures and all that are overkill for something as simple as putting blocky images/text on the screen, but I've kind of already done it so there must be a better way.  What do you think?

Haha I totally forgot about that!  Yeah, that was an e-card I started on for my geeky friends (lol).  And it did end up as the graphics component of a couple games.  Now I hit the weird rectangle thing before too, and I solved it with:

ctx.imageSmoothingEnabled = false;	// Where "ctx" is a canvas element's "context"

And I did get it up to near the "resolution" (aspect ratio?) you were describing.  I think mind ended up working at 256x224, like the old (S)NES.  But yeah, I do kind of wonder how the emulators do make the screens look so much like the originals.

HTH

Nothing wrong with shaders and textures. In fact, using them is probably far more efficient than the alternatives. In the emulation scene, there are quite a few CRT shaders which attempt to emulate old screens: http://emulation.gametechwiki.com/index.php/CRT_Shaders

Awesome!  I'll have to try both of these (lol). Thanks.