Canvas rendering context setting font throws NS_ERROR_FAILURE #2087

In some situations, most notably some external graphing plugins to websites, we throw on trying to set context.font on a 2D canvas.

e.g.

    <canvas id="myCanvas" width="1000" height="545" style="border:1px solid #000; background:#29abe0;"></canvas>
    <script>

    var canvasheight = 545;
    var canvaswidth = 1000;
        var finalWidth = 1000;
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.font = "30px Arial";
        var finalHeight = 545;
            var background = new Image();
            background.src = "https://cdn.ko-fi.com/cdn/ogbg.png?v=3";
            background.crossOrigin = "Anonymous";
            // Make sure the image is loaded first otherwise nothing will draw.
            background.onload = function () {
              ctx.drawImage(background, 0, 0);
                drawImage();
            };

fails on the line
ctx.font = "30px Arial";
This is presumably because this is in an iframe (sandboxed) that initially does not have a presentation shell because it is display:none or otherwise rendered off-screen without presentation.

In that case, we land at

bool
CanvasRenderingContext2D::SetFontInternal(const nsAString& aFont,
                                          ErrorResult& aError)
{
...
  nsCOMPtr<nsIPresShell> presShell = GetPresShell();
  if (!presShell) {
    aError.Throw(NS_ERROR_FAILURE);
    return false;
  }
...
}

Which makes the JS abort and execution fail.
This can be worked around by simply silently failing to set the font instead of throwing. We can't go ahead and continue here because we need the PressShell for inheritance values.
See also the currently unresolved bugzilla bug that has been around since 2013 and has not yet been addressed.

I've run into this issue personally with opengraph on Ko-Fi and other sites that just say "graphics are not supported" instead of showing a graph.

Self-assigning this. It should be and easy workaround.

In some situations, most notably some external graphing plugins to websites, we throw on trying to set `context.font` on a 2D canvas. e.g. ```HTML <canvas id="myCanvas" width="1000" height="545" style="border:1px solid #000; background:#29abe0;"></canvas> <script> ``` ```JavaScript var canvasheight = 545; var canvaswidth = 1000; var finalWidth = 1000; var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; var finalHeight = 545; var background = new Image(); background.src = "https://cdn.ko-fi.com/cdn/ogbg.png?v=3"; background.crossOrigin = "Anonymous"; // Make sure the image is loaded first otherwise nothing will draw. background.onload = function () { ctx.drawImage(background, 0, 0); drawImage(); }; ``` fails on the line `ctx.font = "30px Arial";` This is presumably because this is in an iframe (sandboxed) that initially does not have a presentation shell because it is `display:none` or otherwise rendered off-screen without presentation. In that case, we land at ```C++ bool CanvasRenderingContext2D::SetFontInternal(const nsAString& aFont, ErrorResult& aError) { ... nsCOMPtr<nsIPresShell> presShell = GetPresShell(); if (!presShell) { aError.Throw(NS_ERROR_FAILURE); return false; } ... } ``` Which makes the JS abort and execution fail. This can be worked around by simply silently failing to set the font instead of throwing. We can't go ahead and continue here because we need the PressShell for inheritance values. See also the currently unresolved [bugzilla bug](https://bugzilla.mozilla.org/show_bug.cgi?id=941146) that has been around since 2013 and has not yet been addressed. I've run into this issue personally with opengraph on Ko-Fi and other sites that just say "graphics are not supported" instead of showing a graph. Self-assigning this. It should be and easy workaround.

Labels Milestones

Canvas rendering context setting font throws NS_ERROR_FAILURE #2087