HTML5 canvas tearing with requestAnimationFrame

Question

UPDATE: This entire issue ended up being a problem with the systems graphics driver, and not (seemingly) a browser / API issue. The torn frames came down to the actual display updating. Thank you again to those who were a part of the discussion and attempts to help.

---

I have page that uses a canvas and 2d context to display a pre-rendered frame at 720p. I'm rendering the frames separately and updating a variable with the new ImageData. Then, within requestAnimationFrame I simply do context.putImageData(cached_image_data);. Despite having the frame fully rendered in advance and effectively double buffered, I still get tearing far too often. There are a few other questions along these lines that I've found on SO, but they all end in "Use RAF". The code comes down to this:

var canvas = document.getElementById("canvas");
var cached_frame = new ImageData(new Uint8ClampedArray(canvas.width * canvas.height * 4), canvas.width, canvas.height);
var context = canvas.getContext("2d");
var framerate = 30;

function draw() {
    if (cached_frame)
        context.putImageData(cached_frame, 0, 0);

    requestAnimationFrame(draw);
}

setInterval(function() {
    var frame = context.getImageData(0, 0, canvas.width, canvas.height);

    // Do things to manipulate frame.data.

    // Save the resultant pixel data for the cached_frame.
    cached_frame.data = frame.data;
}, 1000 / framerate);

draw();

Is there anything more that I can do without turning to webgl?

Any suggestions appreciated. TY all :D

Answer 1

I don't think the code is doing what you think it's doing

First off, as far as I know you can't assign new data to an ImageData so this line

cached_frame.data = frame.data;

Doesn't do anything. We can test that which shows it doens't work

var ctx = document.createElement("canvas").getContext("2d");
document.body.appendChild(ctx.canvas);

var imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
var data = new Uint8ClampedArray(imageData.length);

// fill imageData.data with red
fillWithColor(255, 0, 0, 255, imageData.data);

// fill data with green
fillWithColor(0, 255, 0, 255, data);

// assign imageData.data to data
imageData.data = data;

// Draw. If assigning imageData.data works result will
// be green, if not result will be red
ctx.putImageData(imageData, 0, 0);

function fillWithColor(r, g, b, a, dst) {
  for (ii = 0; ii < dst.length; ii += 4) {
    dst[ii + 0] = r;
    dst[ii + 1] = g;
    dst[ii + 2] = b;
    dst[ii + 3] = a;
  }
}

Second, your draw function is drawing continuously, at least from the code you posted cached_frame is set on line 2 so it's always going to be true and always going to be drawing. If you're somehow partially updating the actual data in cached_frame then it's going to draw when there are only partial results.

I think you want something like this instead

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var frame;
var framerate = 30;

function draw() {
   context.putImageData(frame, 0, 0);
}

setInterval(function() {
    frame = context.getImageData(0, 0, canvas.width, canvas.height);

    // Do things to manipulate frame.data

    // frame is ready, draw it at next rAF
    requestAnimationFrame(draw);
}, 1000 / framerate);

You might want to check if a draw it is already queued if you think decoding will ever happen faster than raf. I don't think you actually need rAF in this case though. I'm pretty sure you could just draw at the end of your setInterval and it will show up the next frame, no tearing.

Here's a test, it's not tearing for me.

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var frame;
var framerate = 30;
var frameCount = 0;

setInterval(function() {
  ++frameCount;
  frame = context.getImageData(0, 0, canvas.width, canvas.height);
  var data = frame.data;
  var width = frame.width;
  var height = frame.height;
  // Do things to manipulate frame.data
  for (var yy = 0; yy < height; ++yy) {
    for (var xx = 0; xx < width; ++xx) {
      var offset = (yy * width + xx) * 4;
      data[offset + 0] = ((xx >> 2 & 0x1) ^ frameCount & 0x1) ? 255 : 0;
      data[offset + 3] = 255;
    }
  }

  // frame is ready, draw it at next rAF
  context.putImageData(frame, 0, 0);
}, 1000 / framerate);

<canvas id="canvas" width="1280" height="720"></canvas>