CODEWITHSUNDEEP
javascripthtml5-canvasdrawimage
chanjianyi
chanjianyi

Reputation: 615

drawImage show blank when capture size over source image in Safari

I was making a magnifier in canvas

there is the project and demo in Github:

https://github.com/jy1989/canvas.magnifier.js/blob/master/canvas.magnifier.js

http://jy1989.github.io/magnifier/demo.html

working fine in Chrome, but got the issue in Safari

when move the mouse near the boder of canvas, it shows blank. because of the capture size of source image is over:

enter image description here

Example

1 sx<0 or sy<0

2 the end position of sHeight or the end position of sWidth is over the source image

that would make the drawImage show blank in safari

So how can I make it working?

Upvotes: 0

Views: 1099

Answers (1)

user1693593
user1693593

Reputation:

This is most likely a bug in Safari. The specs states:

When the source rectangle is outside the source image, the source rectangle must be clipped to the source image and the destination rectangle must be clipped in the same proportion.

So to get around this you would have to clip the source rectangle manually.

One way could be like this (showing only for source):

if (sx < 0) {
    sw += sx;
    sx = 0;
}

if (sy < 0) {
    sh += sy;
    sy = 0;
}

if (sx + sw > image.width) {
    sw = image.width - sx
}

if (sy + sh > image.height) {
    sh = image.height - sy
}

if (sx >= image.width || sy >= image.height) { // abort }
if (sw <= 0 || sh <= 0) throw "Index Size error";  // or abort..

Upvotes: 1

Related Questions