Bug 200779 - Text is sometime not rendered on canvas when using transform and clip
Summary: Text is sometime not rendered on canvas when using transform and clip
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Canvas (show other bugs)
Version: Safari Technology Preview
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2019-08-15 12:18 PDT by webrant
Modified: 2019-08-17 19:25 PDT (History)
4 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description webrant 2019-08-15 12:18:19 PDT
Simple repro that works fine in other browsers:

<html>
  <body style="display: flex;">
    <canvas id="canvas1" style="flex: 1; width: 100%; height: 100%; background: #eee" />
  </body>
  <script>

    const canvas = document.getElementById("canvas1");
    const ctx = canvas.getContext("2d");

    ctx.canvas.width = 800;
    ctx.canvas.height = 600;

    ctx.transform(1, 0.27, 0, 1, 0, -95.26);
    ctx.textAlign = "center";
    ctx.textBaseline = "top";
    ctx.lineWidth = 1;
    ctx.font = "22px Arial";
    ctx.beginPath();
    ctx.rect(200, 200, 400, 29);
    ctx.closePath();
    ctx.fillStyle = "#FFE0C0";
    ctx.fill("nonzero");
    ctx.clip("nonzero");
    ctx.fillStyle = "#000";
    ctx.fillText("Text that doesn't display in Safari", 400, 205);

  </script>
</html>
Comment 1 Radar WebKit Bug Importer 2019-08-16 22:40:26 PDT
<rdar://problem/54420498>