Buggy behavior with drawImage()

[Aseem Kishore]

Hi there,

I'm using <canvas> for simple cropping and scaling of images. For IE,
I'm using excanvas, but it's displaying some buggy behavior.

I've written a test case page at http://www.mit.edu/~akishore/misc/excanvas/canvas.html
-- you can see that the expected and actual images are the same in
Firefox and other browsers, but not in IE.

If you look at the source code of canvas.html, you'll see the page
does the following:

1. Loads the original image, composite.jpg, and the expected image,
composite-cropped.png.

2. When composite.jpg has loaded, initializes a canvas/excanvas
element and calls drawImage() such that only the top-right quadrant of
the composite image is drawn.

3. Both the expected image and the drawn actual image are scaled by a
factor of 2.

I'll reply to this original post with the specific buggy behaviors I'm
noticing. Just trying to keep the original post simple.

Aseem

[Aseem Kishore]

[edit to original post: I forgot to mention that I added an
alert("resizing") to the onResize() method in excanvas.js. This is for
a bug I'll address momentarily.]


Bug 1: the <canvas> element needs to be a child of the body. If I
append the <canvas> element to the <p id="canvas-container"> element
instead, the drawImage() method fails in the last line, throwing an
error:

Line 521 in excanvas.js (should be line 520 in the normal excanvas.js
because of the onResize() alert.)
Invalid source HTML for this operation.

You can repro this behavior by modifying canvas.html:

- uncomment line 48 (appends to the <p> element)
- comment line 49 (appends to body)

Aseem

On Sep 8, 11:32 am, Aseem Kishore <aseem.kish...@gmail.com> wrote:
> Hi there,
>
> I'm using <canvas> for simple cropping and scaling of images. For IE,
> I'm using excanvas, but it's displaying some buggy behavior.
>

> I've written a test case page athttp://www.mit.edu/~akishore/misc/excanvas/canvas.html

[Aseem Kishore]

[edit to previous post: it should be lines 49 & 50, not lines 48 & 49.
Sorry!]

Bug 2: drawImage() doesn't properly crop when the source image is
instantiated dynamically AND added to the DOM.

If I don't append it to the DOM, the actual image matches the expected
image (except in size still, described in a later bug). Likewise, if
the source image wasn't instantiated in script, and was instead in the
HTML directly, it works.

You can repro this behavior by modifying canvas.html:

- comment line 32 (appends image to DOM)

Another repro:

- uncomment line 74 (in HTML, declares an empty img with
id="original")
- comment line 30 (instantiates a new Image)
- uncomment line 31 (gets the declared HTML image instead)
- comment line 32 (no need to appendChild since it's already in the
DOM)

Both these above repros should show that the excanvas correctly crops
the image.

Aseem

[Aseem Kishore]

Bug 3: the drawn image never scales with resizing of the canvas.

To help diagnose this bug, I wanted to make sure the onResize()
function in excanvas.js was getting called as expected, so I added an
alert("resizing"). You can also press ctrl+A on the page to see that
the canvas inner div is in fact the correct size, but the drawn image
has not changed.

Note that the canvas was sized even before the drawImage() call, so
it's not even that dynamic resizing isn't working. It's that the
resizing of the canvas (via modifying the style.width and style.height
CSS properties) aren't having any effect; only the <canvas> width and
height attributes seem to matter.

This behavior is also present when the canvas is resized *after* the
drawImage() call. You can repro that by copy/pasting lines 59 and 60
(modifying the style.width and style.height properties) to after the
drawImage() call.

Finally, using Firebug Lite (uncomment lines 9-11, or use a Firebug
Lite bookmarklet), it also seems that the inner elements are sized
very strangely. You can examine like so:


>>> canvas
<canvas contentEditable="inherit" getContext="function () { if
(this.context_) { return this.context_; } return this.context_ = new
CanvasRenderingContext2D_(this); }" width="128" context_="[object
Object]" height="96">
>>> canvas.clientWidth
256
>>> canvas.style.width
"256px"

>>> canvas.firstChild
<div contentEditable="inherit">
>>> canvas.firstChild.clientWidth
256
>>> canvas.firstChild.style.width
"256px"

>>> canvas.firstChild.firstChild
<group contentEditable="inherit">
>>> canvas.firstChild.firstChild.clientWidth
129
>>> canvas.firstChild.firstChild.style.width
"10px"

>>> canvas.firstChild.firstChild.firstChild
<image contentEditable="inherit">
>>> canvas.firstChild.firstChild.firstChild.clientWidth
129
>>> canvas.firstChild.firstChild.firstChild.style.width
"1280px"


You can see that the <canvas> element and its direct inner <div> are
correctly sized, but the two inner <group> and <image> elements aren't
at all. Yet their script and CSS sizes don't match at all their
displayed sizes. Strange.

Aseem

[Klaus Reimer]

Aseem Kishore wrote:
> If I don't append it to the DOM, the actual image matches the expected
> image (except in size still, described in a later bug). Likewise, if
> the source image wasn't instantiated in script, and was instead in the
> HTML directly, it works.

Looks like this has nothing to do with the DOM actually. I tried your
code and discovered that this works also:

image = document.createElement("img");

So no need to put in in the DOM actually. Just the "new Image()" seems
to be the problem. But I have no idea why. Both images provide the same
information when asked for the src and width and height and I think this
is all which should be used by excanvas to render the vml:image...

--
Bye, K <http://www.ailis.de/~k/>
[A735 47EC D87B 1F15 C1E9 53D3 AA03 6173 A723 E391]
(Finger k...@ailis.de to get public key)