FlashCanvas Pro 1.4 released

What's new in FlashCanvas Pro 1.4?

(Enhancements)

  • Added new features to drawImage() and createPattern().
    • Made it possible to take an HTMLCanvasElement as an argument.
    • Made it possible to load image files from other domain.
  • Prepared FlashCanvas.saveImage() method.
  • textAlign gets to support the directionality of "rtl".
  • Refactored the handling of resize event.
  • Some performance improvements.

(Bug fixes)

  • Canvas was rendered incorrectly when printed.
    • Canvas was expanded if the page was in quirks mode.
    • The background was painted gray.
  • Tweaked the color parser to check the input more strictly.
  • Shadows were not rendered according to the drawing model.

(etc.)

  • Included canvas2png.js script that can be used to save a canvas image.
  • Included more benchmark programs and test cases.
  • Made the examples compatible with IE9.

Canvas-to-canvas copy

From this version, drawImage() and createPattern() methods can take an HTMLCanvasElement as an argument. But you should know that this canvas-to-canvas copy feature has a restriction originated from Flash; you cannot copy an image from hidden/offscreen canvases. For example, here is a result of my little experiment.
<canvas id="canvas1" width="100" height="100"></canvas>
<canvas id="canvas2" width="100" height="100"></canvas>
<style>
#canvas1 {
    position: absolute;
    left: -99px;
}
</style>
This canvas1 is nearly hidden, but its right edge is inside the screen. In this case, we can copy the image from canvas1 to canvas2 without problems. If we change the position to {left: -100px}, however, canvas1 becomes entirely hidden, and the copy fails.

Links

FlashCanvas-20101115 released

What's new in FlashCanvas-20101115?

(Enhancements)

  • Made it possible to load image files from other domain.
  • Prepared FlashCanvas.saveImage() method.
  • Modified strokeText() to draw an outline of the text.
  • textAlign gets to support the directionality of "rtl".
  • Refactored the handling of resize event.

(Bug fixes)

  • Canvas was rendered incorrectly when printed.
    • Canvas was expanded if the page was in quirks mode.
    • The background was painted gray.
  • Tweaked the color parser to check the input more strictly.

(etc.)

  • Included canvas2png.js script that can be used to save a canvas image.
  • Made the examples compatible with IE9.

canvas2png.js

When you need to save a canvas image as an image file, Canvas2Image library is a commonly-used solution. Unfortunately, however, this library does not work well with some browsers such as Internet Explorer.

As an alternative and cross-browser solution, we prepared canvas2png.js script that works with all major browsers. This script saves a canvas image as a PNG file with the help of save.php script. canvas2png.js provides only one function, canvas2png(), that takes an HTMLCanvasElement as an argument and can be used in the following way.

var canvas = document.getElementById("mycanvas");
canvss2png(canvas);

Links

FlashCanvas Pro 1.3 released

What's new in FlashCanvas Pro 1.3?

(Enhancements)

  • Supported data URI scheme in drawImage() and createPattern().
  • Supported repetitions of "repeat-x", "repeat-y" and "no-repeat" in createPattern().
  • Made it possible to call initElement() before appendChild().
  • Switched to use JavaScript implementation of measureText().

(Bug fixes)

  • Line styles were not set when the strokeStyle attribute was a CanvasGradient or CanvasPattern object.
  • Patterns were painted ignoring the globalAlpha attribute.
  • Patterns assigned to the strokeStyle attribute were not transformed.
  • The transformation matrix mistakenly affected the shadowOffsetX and shadowOffsetY attributes.
  • arc() didn't add the end point to the subpath when the central angle was greater than 2 pi.
  • closePath() must do nothing if the context has no subpaths.
  • IE8 didn't preload the swf file when the URL was a relative one.
  • Resize event canceled createLinearGradient().
  • The disableContextMenu option disabled mouse clicks on the outside of the canvas element.
  • Many minor bug fixes.

Links

FlashCanvas-20100904 released

What's new in FlashCanvas-20100904?

(Enhancements)

  • Reimplemented fillText().
    • Supported transformations of text.
    • Supported an alpha value of a color.
    • Supported font size with a unit other than "px".
    • Supported font family that contains white spaces in its name.
    • Supported the textAlign attribute of "start" and "end".
    • Gradients and patterns are not supported yet.
  • Implemented strokeText().
    • At present, strokeText() fills text as fillText() does.
  • Implemented measureText().
  • Made it possible to call initElement() before appendChild().
  • Prepared FlashCanvas.setOptions() method for future use.

(Bug fixes)

  • Line styles were not set when the strokeStyle attribute was a CanvasGradient or CanvasPattern object.
  • Patterns were painted ignoring the globalAlpha attribute.
  • arc() didn't add the end point to the subpath when the central angle was greater than 2 pi.
  • closePath() must do nothing if the context has no subpaths.
  • IE8 didn't preload the swf file when the URL was a relative one.
  • Many minor bug fixes.

Improved support for Canvas Text API

This release of FlashCanvas finally supports fillText(), strokeText() and measureText() methods, though they still have some problems. Please see the following examples from Canvas text project.

Links

FlashCanvas Pro 1.3 beta2 released

What's new in FlashCanvas Pro 1.3 beta2?

  • Enabled the turbo mode again on Flash Player 10.1.

Revival of the turbo mode

Flash Player 10.1.53.64 has a bug that the value of FlashVars cannot be changed. Because of this bug, I temporarily disabled the turbo mode in Flash Canvas Pro 1.2.1.

The good news is that this bug is fixed in Flash Player 10.1.82.76 which was released recently. Therefore, I modified the code so that the turbo mode was disabled only when the version of Flash Player was 10.1.53.64.

Links

FlashCanvas Pro 1.3 beta1 is released

What's new in FlashCanvas Pro 1.3 beta1?

  • Enabled native Canvas support in IE9 PP3.
  • Made it possible to call initElement() before appendChild().
  • Fixed a bug that IE8 didn't preload the swf file when the URL was a relative one.
  • Supported data URI scheme in drawImage() and createPattern().
  • Supported repetitions of "repeat-x", "repeat-y" and "no-repeat" in createPattern().
  • Fixed a bug that resize event canceled createLinearGradient().
  • Switched to use JavaScript implementation of measureText().
  • Some minor bug fixes.

Support for flot and JavaScript InfoVis Toolkit

Because of the bug fixes in this version, some graph libraries such as flot and JavaScript InfoVis Toolkit now work with FlashCanvas. If you want to use JavaScript InfoVis Toolkit with FlashCanvas, you need to apply this patch to jit.js.
--- jit.js.orig
+++ jit.js
@@ -2731,3 +2731,3 @@
     if (tag == "canvas" && !supportsCanvas && G_vmlCanvasManager) {
-      elem = G_vmlCanvasManager.initElement(document.body.appendChild(elem));
+      elem = G_vmlCanvasManager.initElement(elem);
     }

Links

FlashCanvas-20100623 is released

This is the third release of the free edition of FlashCanvas.

What's new in FlashCanvas-20100623?

  • Added a code which emulates ExplorerCanvas library.
  • Added basic support for fillText() (thanks to code from fxCanvas).
  • Added JPEG support to toDataURL().
  • Supported data URI scheme in drawImage() and createPattern().
  • Implemented "Save Image As..." in the right-click context menu.
  • Implemented event bubbling for click and dblclick events.
  • Made it possible to use FlashCanvas library installed in other domain.
  • Optimized drawImage().
  • Reduced CPU time consumption.
  • Various bug fixes in drawImage().
    • draw-image-flip.html, an example from ExplorerCanvas project, is now rendered correctly.
    • Images are rendered in the right order.
  • Fixed a bug that arc() failed to calculate the central angle in some cases.
  • Fixed a bug that swf.resize() method could be called before ExternalInterface was ready for use.
  • Fixed a bug that resize event canceled createLinearGradient().
  • Switched to using onunload event instead of onbeforeunload event.
  • Included several additional Canvas demos.
  • Some minor optimizations.

Links

FlashCanvas Pro 1.2.1 is released

What's new in FlashCanvas Pro 1.2.1?

  • Supported Flash Player 10.1.
  • Included one more Canvas game.

FlashVars does not work with Flash Player 10.1

Flash Player 10.1 (10.1.53.64) seems to have a bug that the value of FlashVars cannot be changed. That means we cannot use the turbo mode of FlashCanvas Pro. So, as a quick fix for the problem, I disable the turbo mode when the version of Flash Player is more than 10. More specifically, I added the following code to flashcanvas.js.
if (FLASH_PLAYER_VERSION > 10) {
 option.turbo = false;
 option.delay = 30;
}
I will continue to seek for a better solution.

Links

FlashCanvas Pro 1.2 and Flash Player 10.1

Today Adobe finally released Flash Player 10.1. But I noticed that FlashCanvas Pro 1.2 does not work with Flash Player 10.1 whereas the free edition of FlashCanvas works without problems.

I'll investigate the problem later. If you encounter the same problem with me, please add the following snippet to your code as a temporal fix for the problem.

if (typeof FlashCanvas != "undefined") {
    FlashCanvas.setOptions({
        turbo: false,
        delay: 30
    });
}

FlashCanvas Pro 1.2 is released

What's new in FlashCanvas Pro 1.2?

  • Added a code which emulates ExplorerCanvas library.
  • Implemented asynchronous data transfer via FlashVars.
  • Made it possible to use FlashCanvas library installed in other domain.
  • Optimized drawImage().
  • Optimized fillText() and strokeText().
  • Implemented setOptions() method to configure FlashCanvas.
    • "disableContextMenu" option
    • "turbo" option
    • "delay" option
  • Fixed a bug that fillText(), strokeText(), measureText() caused an error when the first argument was number.
  • Fixed a bug that swf.resize() method could be called before ExternalInterface was ready for use.
  • Switched to using onunload event instead of onbeforeunload event.
  • Included several additional Canvas demos.

Improved compatibility with ExplorerCanvas

FlashCanvas starts to support API of ExplorerCanvas library. Some libraries like JavaScript InfoVis Toolkit, for example, call G_vmlCanvasManager.initElement() method provided by ExplorerCanvas. Now you can easily use FlashCanvas in combination with such libraries.

Data transfer via FlashVars

By default, FlashCanvas Pro 1.2 uses asynchronous data transfer via FlashVars together with ExternalInterface; but some demos might show strange behavior. In that case, please try to add the following code:
if (typeof FlashCanvas != "undefined") {
    FlashCanvas.setOptions({
        turbo: false,
        delay: 30
    });
}
With this setting, FlashCanvas uses only ExternalInterface.

Right-click context menu

FlashCanvas provides a customized right-click menu from which you can save the Canvas image as a PNG file. If you'd like to use right mouse button for your own purpose, please add the following code:
if (typeof FlashCanvas != "undefined") {
    FlashCanvas.setOptions({
        disableContextMenu: true
    });
}
With this setting, you can disable the right-click menu of FlashCanvas.

Links

FlashCanvas Pro 1.1 is released

What's new in FlashCanvas Pro 1.1?

FlashCanvas Pro 1.1 has several bug fixes, optimizations and additional features. The following is a list of those changes:
  • Various bug fixes in drawImage().
    • draw-image-flip.html, an example from ExplorerCanvas project, is now rendered correctly.
    • Images are rendered in the right order.
  • Optimize stroke().
  • Optimize fillText() and strokeText().
  • Optimize drawImage().
  • Reduce CPU time consumption.
  • Add JPEG support to toDataURL().
  • Implement "Save Image As..." in the right-click context menu.
  • Implement event bubbling for click and dblclick events.
  • Remove ambiguity from the license.

Links

FlashCanvas Pro 1.0 is released!

I am pleased to announce that today I released FlashCanvas Pro 1.0.

What is FlashCanvas?

FlashCanvas is a JavaScript library which adds the HTML5 Canvas support to Internet Explorer.
It renders shapes and images via Flash drawing API, and in many cases, runs faster than other similar libraries which use VML or Silverlight. It is released under the MIT License and has been developed on Google Code.

What is FlashCanvas Pro?

FlashCanvas Pro is a professional edition of FlashCanvas. It features:
  • Support almost all Canvas APIs including text, shadow and pixel manipulation.
  • Utilize Flash Player 10 features if available, that provides better performance and compatibility (Flash Player 9 is also supported).
  • Available free of charge for non-profit use. Commercial license is also provided.
The differences between the editions are described here in more detail, and the supported Canvas methods/attributes are listed in Canvas API page.

Although FlashCanvas Pro is closed-source, I will gradually backport the source code from FlashCanvas Pro to FlashCanvas. In other words, FlashCanvas Pro is merely the latest version of FlashCanvas in my experimental branch. By paying a license fee, the user can use advanced features of FlashCanvas Pro ahead of other users.

What is the benefit of using FlashCanvas Pro?

FlashCanvas Pro helps you innovate HTML5 Canvas in your site. By installing FlashCanvas Pro on your site, you can suppose that most visitors use a Canvas-compliant browser. FlashCanvas Pro is very helpful in developing cross-browser Canvas demos and applications.

To demonstrate the capability of FlashCanvas Pro, I prepared many examples and test cases.
You can try them out online in the Example page. Those examples are also included in the distribution package.

Future plans

FlashCanvas Pro is still under development and has some problems especially in drawImage() method. I plan to release the next version as soon as possible, which will have an improved support for drawImage().

I expect that it will be also possible to utilize FlashCanvas as an ActionScript graphic library. If you want to port a Canvas application to Flash, for example, FlashCanvas may be of assistance.

Links


EDIT: I replace the file FlashCanvasPro-1.0.zip by the new one because I found a bug in toDataURL(). If you downloaded the file before Feb. 13, please redownload it.