This is an HTML5 Canvas version of the 2D fire effect used in many old-school coding demos. Normally it's done using an 8-bit indexed color graphics mode, but I chose to do it a little differently here using a 32-bit color canvas. The Effect looks pretty much the same.

There's a few Canvas specific optimization techniques in the code. Double buffering to smooth out the rendering, pre-calculating the y offset values of each line, and manipulating the pixels directly in the main loop rather than calling a putpixel function all help to make it run as fast and smooth as possible (Well over 100fps on my dual-core laptop).

Adapted from original post created on 2012-11-04.

	//Get context, precalc some variables, and create screen buffer
	//Precalc y*width values for each horizontal line
	//Precalc random turbulence values
	//Fill bottom line of buffer with random fire colors
	//Loop through buffer averaging pixels left, right, and below current
			//Average pixels, add turbulence, & write to buffer
	//Move turbulence index a random amount each frame
	//Flip buffer to canvas

Comment