HTML5 Canvas and CODEF Cathode-Ray-Tube (CRT) emulator library – Version 0.3a

A simple HTML5/WebGL CRT emulator library for JavaScript.

Here is a little library to render a HTML5 canvas or CODEF canvas object like an old fashioned monitor.

It’s also responsive and supports full screen, so will automatically resize to use available space when required.

Uses WebGL to display a source canvas in a simular format to an old CRT/CAT monitor – not unlike the Phillips CM 8833 color monitor popular on the Atari ST and Commodore Amiga.

If the web browser does not support WebGL, then the raw canvas is displayed instead with scaling handled by CSS.

Supports HTML5 canvas, or a CODEF canvas object as a data source.

Links:

crtEmulator0_3a.zip – a zip file containing the library, plus the examples below.

Online copy of the documentation.

HTML5 2d canvas example with default settings.

Level 16 CODEF screen by Mellow Man rendered with default settings.

Level 16 rendered with a custom shader that looks like my previous CRT emulator.

Level 16 rendered inside a monitor image – monitor image by AWSM.

It’s very easy to use!

Here is a simple CODEF example:

Add files crt_emulator.css and crt_emulator.js from the zip file above to your CODEF screen.



 

Add above to your HTML file.

function init(){
	// Old way of displaying a CODEF canvas on the screen.
    //myCanvas=new canvas(768,536,'main');

    // New way of displaying a CODEF canvas on the screen with CRT emulator.
    myCanvas=new canvas(768,536);       // Create hidden CODEF canvas.
    crtEmulator.init(myCanvas, "main"); // init CRT emulator with CODEF canvas
                                        // object to display on screen.

   	go();
}

function go(){

	// ... Do animation stuff to 'myCanvas' CODEF object etc.

	crtEmulator.updateFrame(); // Call just before requestAnimFrame to update
                               // the webGL canvas displayed on the screen.
	requestAnimFrame( go );
}

And modify your CODEF screen simular to above.

3 thoughts on “HTML5 Canvas and CODEF Cathode-Ray-Tube (CRT) emulator library – Version 0.3a”

Leave a Reply

Your email address will not be published. Required fields are marked *