context.drawImage() doesn't work correctly

Fixed Issue #16192680

Details

Author
Borja V.
Created
Mar 2, 2018
Privacy
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
Found in build #
16.16299
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

When i want to draw an image with canvas and the size of canvas is bigger than the image, Edge throws me an Error (IndexSizeError)

Example:

var image = document.getElementById("myImage");
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.drawImage(image, 1, 0, 499, 300, 0, 0, 749, 417);

If myImage is 299px high or smaller Edge seem not to like this and decide to throw an error.

In Firefox and Chrome works as expected

Attachments

1 attachment

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “Steven K.”

  • This is because the drawImage() clip parameters given in your example will attempt to clip the source image’s height at 300px.  If the source is smaller than the ‘sy’ parameter, you will get this error.

    I believe Chrome and Firefox do something to manage this error scenario.  In Chrome the image gets skewed.  The width and height parameters are meant for skewing, so this is an error condition.

      context.drawImage(image, 1, 0, 499, 300, 0, 0, 749, 417);

    // clip an image
    // context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
    // img - Specifies the image, canvas, or video element to use
    // sx - Optional. The x coordinate where to start clipping
    // sy - Optional. The y coordinate where to start clipping
    // swidth - Optional. The width of the clipped image
    // sheight - Optional. The height of the clipped image
    // x - The x coordinate where to place the image on the canvas
    // y - The y coordinate where to place the image on the canvas
    // width - Optional. The width of the image to use (stretch or reduce the image)
    // height - Optional. The height of the image to use (stretch or reduce the image)

  • I tested this in a recent development build and Edge now has the same behavior as Chrome.  I.e. accommodating the incorrect parameter usage.  :)

  • Microsoft Edge Team

    Changed Status to “Fixed”

  • Thanks for fixing the problem. :D

    When are you going to upload it on live build?

  • Hello,

    Thank you for providing this information about the issue. We are pleased to report this feature is fixed in Edge 17093 and is available in our Insider Preview build.

    Best Wishes,
    The MS Edge Team

You need to sign in to your Microsoft account to add a comment.

Sign in