Недавно обнаружил эту ошибку при работе с CanvasRenderingContext2D.drawImage() методом Canvas 2D API
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
sx и sy параметры, которые должны быть x-axis и y-axis координатами левый верхний угол под прямоугольника исходного изображения , для рисования в контексте назначения,(источник: Mozilla ) работает по-разному в браузерах Safari, если предоставляется значение меньше 0 (отрицательные значения).
Отрицательные значения для sx и sy в других браузерах ( протестированных Chrome и Microsoft Edge ) работают должным образом, переставляя упомянутый верхний левый угол вдоль отрицательных сторон 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>
Любой обходной путь для этого определенно поможет.
РЕДАКТИРОВАТЬ: Ширина источника и высота источника не превышает фактического изображенияширина или высота.