Bug 231474

Summary:

Safari 15 canvas drawImage API Error

Product:

WebKit

Reporter:

kaelyn <vip993910032>

Component:

Canvas

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED CONFIGURATION CHANGED

Severity:

Blocker

CC:

ap, dino

Priority:

Version:

Safari 15

Hardware:

Unspecified

OS:

Unspecified

Attachments:

Description	Flags
render error on safari 15	none
Correct Rendering result on chrome	none

Description kaelyn 2021-10-09 01:28:18 PDT

Created attachment 440703 [details]
render error on safari 15

Version: 15.0(17612.1.15.1.14)
Description: 
1. Getting the canvas context.
2. Create an image dom element with long base64 string as its source.
3. Using drawImage API to render that image dom.
4. The canvas crash, it cannot render anything after using drawImage API!!!

Test code:
https://codepen.io/applekaelyn/pen/mdWgMGq
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <img id="testImg"       width="100"
      height="100"
         src="data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiPgogIDxlbGxpcHNlIGN4PSIyNDAiIGN5PSIxMDAiIHJ4PSIyMjAiIHJ5PSIzMCIgc3R5bGU9ImZpbGw6cHVycGxlIiAvPgogIDxlbGxpcHNlIGN4PSIyMjAiIGN5PSI3MCIgcng9IjE5MCIgcnk9IjIwIiBzdHlsZT0iZmlsbDpsaW1lIiAvPgogIDxlbGxpcHNlIGN4PSIyMTAiIGN5PSI0NSIgcng9IjE3MCIgcnk9IjE1IiBzdHlsZT0iZmlsbDp5ZWxsb3ciIC8+Cjwvc3ZnPg=="></img>
    <canvas height="200" width="200" id="test"></canvas>
  </body>

</html>
```

```js
var ctx = document.getElementById("test").getContext("2d");
console.log("😄", ctx);
ctx.font = "12px serif";
ctx.fillText("Hello world", 50, 10);
var image = document.getElementById('testImg');
ctx.drawImage(image, 20, 20, 100, 100)

ctx.fillText("Hello world again!", 50, 200);
```

Comment 1 kaelyn 2021-10-09 01:28:59 PDT

Created attachment 440704 [details]
Correct Rendering result on chrome

Comment 2 Alexey Proskuryakov 2021-10-11 09:24:00 PDT

I cannot reproduce this with Safari 15.1 beta. Could you please verify with the beta, and reopen if this still happens?