Support canvas element for element timing

As discussed shortly in the WebPerfWG meeting on 7/2/2020 I'm filing this as an issue for the project.

Current element timing spec (as of 7/5/2020) does not support HTML canvas ( <canvas> ) as an element type which can be tracked.

There is an important use case where mostly static user content is created using HTML Canvas elements. The static content creation may be expensive and done on a Canvas which is not added to the DOM body or perhaps even computed using a WebWorker with OffscreenCanvas context.

Without being able to use element timing performance metrics it is non-trivial (if not impossible) to get accurate timing measurements on when the Canvas element has be painted and displayed to the user. A "workaround" is to try capture the time on the next rAF after the canvas element was added to the DOM.

I propose to add HTML Canvas element to the supported DOM element types. After a canvas element has been added to the DOM and rendered it would be tracked the same way the spec defines how to measure the timing of other supported elements.

It probably should not measure every canvas paint after it has been added to the DOM since this may turn out to be too noisy - especially for animation rich usages. I would like to thing that Canvas element has some similarity to Image element so I wonder how much harder it would be to add it to a specification.

An example of simple usage could be like this:

var canvas = document.createElement("canvas");
canvas.setAttribute("elementtiming", "my-canvas-timing");

var ctx = canvas.getContext("2d");

// draw something on the canvas (can be very complex drawing sequence)
ctx.fillRect(10, 10, 200, 200);

const observer = new PerformanceObserver((list) => {
    let perfEntries = list.getEntriesByType("element");
    const canvasTiming = perfEntries.filter(e => e.identifier === "my-canvas-timing")[0];
    
    console.log(canvasTiming);
});
    
observer.observe({type: 'element', buffered: true});

// add canvas to the DOM and time when it has been painted
document.body.appendChild(canvas);

Are there any limitations, downsides for this proposal?

Start by reading the current Element Timing specification and the WebPerfWG discussion referenced in the issue, then review how supported DOM elements are defined alongside the Canvas and OffscreenCanvas use cases. Done means reaching agreement on whether canvas should be supported, what paint timing behavior applies, and the corresponding specification changes.