HTML5 Canvas DrawImage Safari 12.0错误（在iOS 12.1 / Mac OS Mojave上测试）

Question

最近在处理Canvas 2D API的CanvasRenderingContext2D.drawImage()方法时发现了此错误

void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

sx和sy参数被假定为子元素左上角的x-axis和y-axis坐标-源图像的矩形，以绘制到目标上下文中。 （来源：Mozilla）在提供小于0 （负值）的值时，在Safari浏览器上的工作方式有所不同。

在其他浏览器（经测试测试的Chrome和Microsoft Edge ）上，sx和sy的负值可以按预期方式工作，方法是沿着x-axis和y-axis

的反面

---

但是在 Safari 上，sx和sy的负值会将左上角的坐标重置为0,0，并影响子项的RIGHT BOTTOM CORNER -源图像的矩形，以绘制到目标上下文中。

这是随附的画布演示段在Chrome和Safari （轮廓是画布的边界）上呈现的方式：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const image = document.getElementById('source');

onload = e =>
  ctx.drawImage(image, -40, -160, 300, 290, 0, 0, 300, 290);

canvas {
  border: 1px solid black;
}

<canvas id="canvas" width="300" height="290"></canvas>
<div style="display:none;">
  <img id="source" src="https://i.stack.imgur.com/NS35G.jpg">
</div>

为此解决任何事情肯定会有所帮助。

编辑：来源宽度和来源高度不超过实际图像的宽度或高度。