HTML5 Canvas DrawImage Safari 12.0 bug (tested on iOS 12.1/Mac OS Mojave)
Found this bug recently while dealing with CanvasRenderingContext2D.drawImage() method of the Canvas 2D API
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
The sx and sy parameters which are supposed to be the x-axis and y-axis coordinates of the top-left corner of the sub-rectangle of the source image, to draw into the destination context. (source: Mozilla) work differently on Safari browsers when provided with a value less than 0 (negative values).
Negative values for sx and syon other browsers (tested Chrome and Microsoft Edge) work as expected, by re-positioning the mentioned top-left corner along the negative sides of the x-axis and y-axis
But on Safari, negative values for sx and sy reset the top left coordinates to 0,0 and affect the RIGHT BOTTOM CORNER of the sub-rectangle of the source image, to draw into the destination context.
This is how the attached demo snippet of canvas renders on Chrome and Safari (outline being the boundary of the canvas):
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>Any work around for this will definitely help.
EDIT: Source width and source height doesn’t exceed the actual image’s width or height.
html canvas safari html5-canvas mobile-safari
asked Nov 25 '18 at 17:38
saibbywebsaibbyweb
8461620
|
show 1 more comment
Found this bug recently while dealing with CanvasRenderingContext2D.drawImage() method of the Canvas 2D API
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
The sx and sy parameters which are supposed to be the x-axis and y-axis coordinates of the top-left corner of the sub-rectangle of the source image, to draw into the destination context. (source: Mozilla) work differently on Safari browsers when provided with a value less than 0 (negative values).
Negative values for sx and syon other browsers (tested Chrome and Microsoft Edge) work as expected, by re-positioning the mentioned top-left corner along the negative sides of the x-axis and y-axis
But on Safari, negative values for sx and sy reset the top left coordinates to 0,0 and affect the RIGHT BOTTOM CORNER of the sub-rectangle of the source image, to draw into the destination context.
This is how the attached demo snippet of canvas renders on Chrome and Safari (outline being the boundary of the canvas):
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>Any work around for this will definitely help.
EDIT: Source width and source height doesn’t exceed the actual image’s width or height.
html canvas safari html5-canvas mobile-safari
asked Nov 25 '18 at 17:38
saibbywebsaibbyweb
8461620
1
Possible duplicate of Cropping with drawImage not working in Safari
– Kaiido
Nov 26 '18 at 1:06
@Kaiido sorry my bad I misread the op's question.
– Blindman67
Nov 26 '18 at 1:06
Kaiido, No its not. Source width and source height doesn’t exceed the actual image’s width or height.
– saibbyweb
Nov 26 '18 at 4:03
@Kaiido Also, it doesn't answer my question. I need that specific behavior, (blank space from top and left side of the canvas) which seems to work on all browsers except Safari. You should remove this possible duplicate flag.
– saibbyweb
Nov 26 '18 at 6:12
1
@saibbyweb that is the same old bug in Safari's implementation of drawImage. Ok, you don't take it from the same exact angle as the proposed dupe, but the root cause is exactly the same, and the solution is too: calculate yourself the offset you need so that your source rect be entirely in the source image (i.e no negative x or y values). In your case it would bectx.drawImage(image, 0, 0, 260, 130, 40, 160, 260, 130);. So you are right your source rectangle is not bigger than the source image, but as in the proposed dupe, it is outside and non-existing pixels are being selected.
– Kaiido
Nov 26 '18 at 6:27
|
show 1 more comment
Found this bug recently while dealing with CanvasRenderingContext2D.drawImage() method of the Canvas 2D API
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
The sx and sy parameters which are supposed to be the x-axis and y-axis coordinates of the top-left corner of the sub-rectangle of the source image, to draw into the destination context. (source: Mozilla) work differently on Safari browsers when provided with a value less than 0 (negative values).
Negative values for sx and syon other browsers (tested Chrome and Microsoft Edge) work as expected, by re-positioning the mentioned top-left corner along the negative sides of the x-axis and y-axis
But on Safari, negative values for sx and sy reset the top left coordinates to 0,0 and affect the RIGHT BOTTOM CORNER of the sub-rectangle of the source image, to draw into the destination context.
This is how the attached demo snippet of canvas renders on Chrome and Safari (outline being the boundary of the canvas):
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>Any work around for this will definitely help.
EDIT: Source width and source height doesn’t exceed the actual image’s width or height.
html canvas safari html5-canvas mobile-safari
asked Nov 25 '18 at 17:38
saibbywebsaibbyweb
8461620
Found this bug recently while dealing with CanvasRenderingContext2D.drawImage() method of the Canvas 2D API
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
The sx and sy parameters which are supposed to be the x-axis and y-axis coordinates of the top-left corner of the sub-rectangle of the source image, to draw into the destination context. (source: Mozilla) work differently on Safari browsers when provided with a value less than 0 (negative values).
Negative values for sx and syon other browsers (tested Chrome and Microsoft Edge) work as expected, by re-positioning the mentioned top-left corner along the negative sides of the x-axis and y-axis
But on Safari, negative values for sx and sy reset the top left coordinates to 0,0 and affect the RIGHT BOTTOM CORNER of the sub-rectangle of the source image, to draw into the destination context.
This is how the attached demo snippet of canvas renders on Chrome and Safari (outline being the boundary of the canvas):
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>Any work around for this will definitely help.
EDIT: Source width and source height doesn’t exceed the actual image’s width or height.
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>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>html canvas safari html5-canvas mobile-safari
html canvas safari html5-canvas mobile-safari
asked Nov 25 '18 at 17:38
saibbywebsaibbyweb
8461620
asked Nov 25 '18 at 17:38
saibbywebsaibbyweb
8461620
edited Nov 26 '18 at 4:05
saibbyweb
asked Nov 25 '18 at 17:38
saibbywebsaibbyweb
8461620
asked Nov 25 '18 at 17:38
saibbywebsaibbyweb
8461620
asked Nov 25 '18 at 17:38
saibbywebsaibbyweb
8461620
8461620
1
Possible duplicate of Cropping with drawImage not working in Safari
– Kaiido
Nov 26 '18 at 1:06
@Kaiido sorry my bad I misread the op's question.
– Blindman67
Nov 26 '18 at 1:06
Kaiido, No its not. Source width and source height doesn’t exceed the actual image’s width or height.
– saibbyweb
Nov 26 '18 at 4:03
@Kaiido Also, it doesn't answer my question. I need that specific behavior, (blank space from top and left side of the canvas) which seems to work on all browsers except Safari. You should remove this possible duplicate flag.
– saibbyweb
Nov 26 '18 at 6:12
1
@saibbyweb that is the same old bug in Safari's implementation of drawImage. Ok, you don't take it from the same exact angle as the proposed dupe, but the root cause is exactly the same, and the solution is too: calculate yourself the offset you need so that your source rect be entirely in the source image (i.e no negative x or y values). In your case it would bectx.drawImage(image, 0, 0, 260, 130, 40, 160, 260, 130);. So you are right your source rectangle is not bigger than the source image, but as in the proposed dupe, it is outside and non-existing pixels are being selected.
– Kaiido
Nov 26 '18 at 6:27
|
show 1 more comment
1
Possible duplicate of Cropping with drawImage not working in Safari
– Kaiido
Nov 26 '18 at 1:06
@Kaiido sorry my bad I misread the op's question.
– Blindman67
Nov 26 '18 at 1:06
Kaiido, No its not. Source width and source height doesn’t exceed the actual image’s width or height.
– saibbyweb
Nov 26 '18 at 4:03
@Kaiido Also, it doesn't answer my question. I need that specific behavior, (blank space from top and left side of the canvas) which seems to work on all browsers except Safari. You should remove this possible duplicate flag.
– saibbyweb
Nov 26 '18 at 6:12
1
@saibbyweb that is the same old bug in Safari's implementation of drawImage. Ok, you don't take it from the same exact angle as the proposed dupe, but the root cause is exactly the same, and the solution is too: calculate yourself the offset you need so that your source rect be entirely in the source image (i.e no negative x or y values). In your case it would bectx.drawImage(image, 0, 0, 260, 130, 40, 160, 260, 130);. So you are right your source rectangle is not bigger than the source image, but as in the proposed dupe, it is outside and non-existing pixels are being selected.
– Kaiido
Nov 26 '18 at 6:27
1
1
Possible duplicate of Cropping with drawImage not working in Safari
– Kaiido
Nov 26 '18 at 1:06
Possible duplicate of Cropping with drawImage not working in Safari
– Kaiido
Nov 26 '18 at 1:06
@Kaiido sorry my bad I misread the op's question.
– Blindman67
Nov 26 '18 at 1:06
@Kaiido sorry my bad I misread the op's question.
– Blindman67
Nov 26 '18 at 1:06
Kaiido, No its not. Source width and source height doesn’t exceed the actual image’s width or height.
– saibbyweb
Nov 26 '18 at 4:03
Kaiido, No its not. Source width and source height doesn’t exceed the actual image’s width or height.
– saibbyweb
Nov 26 '18 at 4:03
@Kaiido Also, it doesn't answer my question. I need that specific behavior, (blank space from top and left side of the canvas) which seems to work on all browsers except Safari. You should remove this possible duplicate flag.
– saibbyweb
Nov 26 '18 at 6:12
@Kaiido Also, it doesn't answer my question. I need that specific behavior, (blank space from top and left side of the canvas) which seems to work on all browsers except Safari. You should remove this possible duplicate flag.
– saibbyweb
Nov 26 '18 at 6:12
1
1
@saibbyweb that is the same old bug in Safari's implementation of drawImage. Ok, you don't take it from the same exact angle as the proposed dupe, but the root cause is exactly the same, and the solution is too: calculate yourself the offset you need so that your source rect be entirely in the source image (i.e no negative x or y values). In your case it would be
ctx.drawImage(image, 0, 0, 260, 130, 40, 160, 260, 130);. So you are right your source rectangle is not bigger than the source image, but as in the proposed dupe, it is outside and non-existing pixels are being selected.– Kaiido
Nov 26 '18 at 6:27
@saibbyweb that is the same old bug in Safari's implementation of drawImage. Ok, you don't take it from the same exact angle as the proposed dupe, but the root cause is exactly the same, and the solution is too: calculate yourself the offset you need so that your source rect be entirely in the source image (i.e no negative x or y values). In your case it would be
ctx.drawImage(image, 0, 0, 260, 130, 40, 160, 260, 130);. So you are right your source rectangle is not bigger than the source image, but as in the proposed dupe, it is outside and non-existing pixels are being selected.– Kaiido
Nov 26 '18 at 6:27
|
show 1 more comment
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53470133%2fhtml5-canvas-drawimage-safari-12-0-bug-tested-on-ios-12-1-mac-os-mojave%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53470133%2fhtml5-canvas-drawimage-safari-12-0-bug-tested-on-ios-12-1-mac-os-mojave%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Possible duplicate of Cropping with drawImage not working in Safari
– Kaiido
Nov 26 '18 at 1:06
@Kaiido sorry my bad I misread the op's question.
– Blindman67
Nov 26 '18 at 1:06
Kaiido, No its not. Source width and source height doesn’t exceed the actual image’s width or height.
– saibbyweb
Nov 26 '18 at 4:03
@Kaiido Also, it doesn't answer my question. I need that specific behavior, (blank space from top and left side of the canvas) which seems to work on all browsers except Safari. You should remove this possible duplicate flag.
– saibbyweb
Nov 26 '18 at 6:12
1
@saibbyweb that is the same old bug in Safari's implementation of drawImage. Ok, you don't take it from the same exact angle as the proposed dupe, but the root cause is exactly the same, and the solution is too: calculate yourself the offset you need so that your source rect be entirely in the source image (i.e no negative x or y values). In your case it would be
ctx.drawImage(image, 0, 0, 260, 130, 40, 160, 260, 130);. So you are right your source rectangle is not bigger than the source image, but as in the proposed dupe, it is outside and non-existing pixels are being selected.– Kaiido
Nov 26 '18 at 6:27