Cache frames in movie player to stop flashing.

[simsong]

• Implement a property called fillsEntireBounds that indicates that an object completely fills its bounding rectnage.
• CanvasController should check to see if the first object has the same size as the canvas and if it implements fillsEntireBounds. If so, there is no need to clear the background first.
• Read all of the frames at once from the database and cache them in the movie player. This should help with the flashing.
• Display the new frames with double-buffering (may be possible without pre-caching).

Right now the frames are stored in the MySQL database. But they will still flash once we move them to S3. This is not a speed of loading issue.

see:

• https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
• https://stackoverflow.com/questions/46197034/canvas-flickers-when-trying-to-draw-image-with-updated-src

[sbarber2]

To bring an idea forward from #368, one cause of the flashing is that a blank (white) canvas is (at least sometimes) drawn in between movie frames. Whether that's because of explicit coding in the app or an artifact of the way the browser environment is refreshing, that white-drawing is worth seeking out and eliminating. IME it's unintended blank redraws like this that causes perceived flashing, not the speed of update between frames.

[simsong]

Hm. The redraw function does a clearRect:

webapp/static/analyze.js

Lines 139 to 145 in db78b32

	redraw( _msg ) {
	// clear canvas
	// this is useful for tracking who called redraw, and how many times it is called, and when
	// console.log(`redraw=${msg} id=${this.c.id}`);
	this.ctx.clearRect(0, 0, this.c.width, this.c.height);
	// draw the objects. Always draw the selected objects after

The first object in the objects array is a myImage object:

webapp/static/analyze.js

Lines 623 to 629 in db78b32

	this.theImage = new myImage( 0, 0, data.data_url, this);
	this.objects = []; // clear the array
	this.objects.push(this.theImage );
	$(`#${this.this_id} td.message`).text( ' ' );
	if (data.frame_number>=0){
	this.track_button.val( `retrack from frame ${data.frame_number} to end of movie` );
	}

webapp/static/analyze.js

Lines 655 to 686 in db78b32

	class myImage extends MyObject {
	constructor(x, y, url, ptc) {
	super(x, y, url);
	this.ptc = ptc;
	let theImage=this;
	this.draggable = false;
	this.ctx = null;
	this.state = 0; // 0 = not loaded; 1 = loaded, first draw; 2 = loaded, subsequent draws
	this.img = new Image();
	// When the image is loaded, draw the entire stack again.
	this.img.onload = (_event) => {
	theImage.state = 1;
	if (theImage.ctx) {
	ptc.redraw('myImage constructor');
	}
	};
	this.draw = function (ctx) {
	// See if this is the first time we have drawn in the context.
	theImage.ctx = ctx;
	if (theImage.state > 0){
	if (theImage.state==1){
	ptc.naturalWidth = this.img.naturalWidth;
	ptc.naturalHeight = this.img.naturalHeight;
	theImage.state = 2;
	ptc.set_zoom( 1.0 );
	}
	ctx.drawImage(this.img, 0, 0, this.img.naturalWidth, this.img.naturalHeight);
	}
	};

I think that the clear() can be removed if the first object is an image and has the same size as the canvas. Then we won't get flashing.