Scaled canvas renders incorrectly

[GoogleCodeExporter]

A canvas has two sizes - the intrinsic dimensions specified in CSS pixels which 
define the coordinate space size, and the layout size controlled by styles. (In 
most cases, the coordinate space size matches the dimensions of an underlying 
bitmap, though this is explicitly not required in the HTML5 draft standard.)

Of note from the HTML5 draft: "During rendering, the image is scaled to fit 
this layout size."

flashcanvas does not implement this behavior.

1. Construct a canvas that is scaled, e.g.:

<div style="width: 300px; height: 200px; border: solid 2px red;">
<canvas width="50" height="50" style="width: 100%; height: 100%;">
</div>

2. Draw a rectangle that fills the canvas e.g. fillRect(0,0,50,50)

Example: http://calormen.com/tmp/fctest.htm

Expected:

The canvas element and drawing is scaled - i.e. a 300x200 rectangle will appear 
on screen, completely filling the container. This is seen in browsers that 
natively implement Canvas - Chrome, Safari, and Firefox. 

Actual:

In IE the object element is set to an explicit width: 50px, height: 50px; the 
rect fills only this space.

Environment:

This is with the 2010-09-04 version of flashcanvas, in IE8 on WinXP.

Notes:

Adding <param name="scale" value="exactfit"> to the script which generates the 
tag would, in theory, allow the canvas to scale. Trying this, then resetting 
the object to have 100% width/height does scale the object, but the graphics 
still appear to be scaled to actual device pixels (possibly due to logic in the 
SWF?). 

ExCanvas doesn't support this either (although I've suggested patches for it.)

Original issue reported on code.google.com by inexorab...@hotmail.com on 30 Oct 2010 at 7:33

Attachments:

• fctest.htm

[GoogleCodeExporter]

You're right. That behavior is not yet implemented in FlashCanvas.

I suppose most canvas applications don't use this scaling, but this problem 
should be fixed someday.

Original comment by revu...@gmail.com on 31 Oct 2010 at 4:34

• Changed state: Accepted

[GoogleCodeExporter]

Since you can't use another canvas as a parameter for drawImage, and changing 
canvas width/height style can't be used to zoom either, is there any other way 
to implement bitmap zooming? Bitmap zooming is useful when repeatedly redrawing 
contents to animate zoom action is too slow.

Original comment by goo...@alekstra.com on 11 Nov 2010 at 10:03

[GoogleCodeExporter]

The next release of FlashCanvas Pro will support canvas-to-canvas copy. For 
now, you can try a beta version linked from the following thread.
http://groups.google.com/group/flashcanvas/browse_thread/thread/2f4b5558ae57d499

Original comment by revu...@gmail.com on 11 Nov 2010 at 10:31

[GoogleCodeExporter]

Tested new version with two 800x500px canvases. drawImage took 900ms before 
visible results but the method itself returned immediately! 500x300px drawImage 
took 350ms before visible results.

2.67 GHz quadcore Xeon (W3520), Windows XP running in virtual machine + IE6. No 
visual lag (<20ms) running natively in FF4 or Google Chrome in same VM.

Is there any other way to do bitmap scaling?

Original comment by goo...@alekstra.com on 1 Dec 2010 at 4:33

[GoogleCodeExporter]

When drawImage() method is used, the bitmap data of the source canvas is cached 
in Flash. And when you call drawImage() again, it will be processed faster if 
the source canvas has not changed. So, executing a dummy drawImage() before the 
real copy might solve your problem.

It would be a hard task to add a support for CSS pixels. I can't implement that 
feature immediately.

Original comment by revu...@gmail.com on 1 Dec 2010 at 10:23

[GoogleCodeExporter]

Yeah, I noticed that. Transferring bitmap data (or rasterization+transfer?) 
from Flash object to another seems to be slow.

Without knowing anything about Flash internals, would it be possible to emulate 
multiple canvases inside just one Flash object to enable fast blits between 
canvases?

Original comment by jani.pii...@gmail.com on 10 Dec 2010 at 11:08

[GoogleCodeExporter]

FlashCanvas uses LocalConnection to transfer bitmap data between Flashes.
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/net/LocalConnect
ion.html

But you can specify the canvas element itself as an image source of 
drawImage(), as shown in the following code. In that case, the data transfer 
requires little time.

    var canvas = document.getElementById("mycanvas");
    var ctx = canvas.getContext("2d");
    ......
    // Copy the image from left to right within the same canvas.
    ctx.drawImage(canvas, 0, 0, 100, 100, 200, 0, 100, 100);

If you'd like to hide the copy source, you can place that region in an 
off-screen area or under some other element.

Your idea is promising to make the blit faster. But I fear that your idea 
doesn't work well in some cases.

  <canvas id="canvas1" width="100" height="100"></canvas>
  <div id="div" style="width:100px; height:100px; display:inline-block;"></div>
  <canvas id="canvas2" width="100" height="100"></canvas>

In this example, canvas1 should be displayed under the div, while canvas2 
should be displayed over the div. Probably your implementation cannot manage 
such an overlay.

Original comment by revu...@gmail.com on 11 Dec 2010 at 5:31

[GoogleCodeExporter]

The underlying issue - canvas not scaling - is still not resolved.

You seem to prefer setting

    stage.scaleMode = StageScaleMode.NO_SCALE;

for some reason. Whatever the reason, that makes the "canvas" useful (drawing 
area) not scale. This affects negatively both, the css's 100%, and page's Zoom 
setting. On all IEs when zoom != 100% with .NO_SCALE drawing area stays same 
(in screen pixels), while page grows. 

Please, set scaleMode to "showAll" or better yet, allow us to pass scaling mode 
with FlashVars. <- problem solved.

Original comment by dvdotsenko on 18 Oct 2011 at 12:25

[GoogleCodeExporter]

When I simply changed the scaleMode, a very small canvas was displayed. I guess 
I have not implemented something important regarding the Flash size. I'll check 
the code when I have time during the next week or two.

Original comment by revu...@gmail.com on 18 Oct 2011 at 8:06

[GoogleCodeExporter]

I found that changing scaleMode to SHOW_ALL does in fact fix the browser 
scaling issue. Can anyone else confirm? Attached is the modified .swf.

Original comment by ashvinja...@gmail.com on 7 Feb 2012 at 11:18

Attachments:

• flashcanvas.swf

[GoogleCodeExporter]

I explored whether we can utilize the SHOW_ALL mode to solve this problem. In 
short, the SHOW_ALL mode is useless.

The width and height, which were defined at the compilation, dominates the 
behavior of the SHOW_ALL mode. Suppose that your application uses a canvas 
element whose size is 200x200. To make your application work, you need to edit 
FlashCanvas.as in the
following way:

    [SWF(width="200",height="200",backgroundColor="#FFFFFF")]

I can't adopt it as an official solution, because it requires recompilation at 
every time when the canvas size is different.

Original comment by revu...@gmail.com on 11 May 2012 at 10:13

[GoogleCodeExporter]

>I found that changing scaleMode to SHOW_ALL does in fact fix the browser 
scaling issue. Can anyone else confirm? Attached is the modified .swf.
No, it doesn't.(((
looking for solution

attached 2 files on 125% scale with default and recompiled swf

Original comment by nolan0...@gmail.com on 20 Jun 2012 at 9:30

Attachments:

• 125_SHOW_ALL.png
• 125_SHOW_NO_SCALE.png