Html5 canvas 在Safari中，未在画布上正确绘制PDF

我试图选择图像的某个部分，然后在画布中显示该部分。 为了查看实际发生的情况，我将代码简化为一个简单的片段：

<canvas id="myCanvas" width="400" height="300"></canvas>

(...)

imageObj.onload = function() {
        // draw cropped image
        var sourceX = 0;
        var sourceY = 0;
        var sourceWidth = 200;
        var sourceHeight = 200;
        var destX = 0;
        var destY = 0;
        var destWidth = 200;
        var destHeight = 200;

        context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
};

如果我使用一个实际的图像，那么一切都按照预期工作，您可以看到一个JSFIDLE

为了获得更高的文本质量，我使用了一个Safari特性，它允许我为图像标签提供一个pdf源。然而，当我尝试在画布上绘制相同的部分时，我得到了不同的渲染区域，因为您也可以看到Safari是必需的

PDF实际上是原始JPG图像导出为带有Mac预览的PDF文件，因此大小相同。我对来自不同来源的不同PDF文件有这个问题，所以这不是我创建PDF的方式造成的问题。 我在代码中所做的唯一更改是将扩展名jpg切换为pdf

在画布上绘制完整大小的图像效果很好，两个版本的渲染方式相同，因此不像Safari那样，无法在画布上正确绘制PDF

还有其他人遇到过这个问题吗？我能做点什么吗