This is a simple tool to convert the static vector shapes (in .swf) to HTML5 Canvas drawing object.

Latest Version: 1.4 (2013/11/26)
Designed for HTML5 Canvas programmers, so the basic understanding of HTML5 Canvas is required.


For App developers, just export all the shapes to a single PDF file. Each shape would be a single page for your to draw on the graphic contexts.


Why vector shapes matters?

As the multiple different hardware products come out, the different display resolution require different images. If your software requires to support such products, these images would cost you lots of time and making your software so fat to download.

Most users wouldn’t be such patient for waiting, they’ll just turn their focus to the other stuffs. Your work would be easily forgot even they did download it but never be run.

Vector shapes are resolution independent and extremely small. Users won’t see any blurred images no matter which hardware they’re using.



  • Generate the canvas drawing objects directly from the .swf file.
  • Preview the generated object drawing in Webkit.
  • WYWYG authoring.
  • Export/Import to/from .js
  • Work with jQuery/Box2D(JS)/… so easily. (Check the examples in the tutorial.)
  • Export all shapes to a PDF file. (Ver. 1.3 or later)


螢幕快照 2013-10-15 上午11.27.35

Converted Canvas Code

The generated object would be like the following example:

F2CCast = {
  F2CActor3 : {
    width : 95,
    height : 95,
    shapeOriginX : 0,
    shapeOriginY : 0,
    draw : function (ctx, anchorX, anchorY) {

        if (!anchorX) anchorX = 0;
        if (!anchorY) anchorY = 0;
with(ctx) { /* ---- Canvas Drawing Start ---- */
translate(this.shapeOriginX - anchorX, this.shapeOriginY - anchorY);
moveTo(0.000, 0.000);
quadraticCurveTo(47.750, 0.000, 95.500, 0.000);
quadraticCurveTo(95.500, 47.750, 95.500, 95.500);
quadraticCurveTo(47.750, 95.500, 0.000, 95.500);
quadraticCurveTo(0.000, 47.750, 0.000, 0.000);
fillStyle = "rgb(0, 0, 255)";
} /* ---- Canvas Drawing End ---- */

      return this;
  } /* End of F2CActor3 */
} /* End Of F2CCast */

It would be easy to be used in a scene graph engine to create the animations or games powered by HTML5 Canvas.


F2C Tutorial is provided for 1.2 or later, please update to the latest version.
There are 10 examples in this tutorial helping you to know how to use the generated objects.

Code I wrote in the examples was free to use in your application(ex: F2CLib.js, *.html).
But external libraries used in the examples (ex: jQuery, Cake, Box2DJS) were under their own licenses.


  1. Why you create this tool?
    I think it’s so stupid to reinvent the wheel. People deserve a better tool to bring their exist resource to the new HTML5 Canvas world instead of redrawing them.
  2. Why use curves instead of lines in the the generated code?
    According to the SWF Format Specification, the lines can be described with curves for morphing. It’s possible to the morphing support in the future.
  3. Important Notes:
    Only static vector shapes are supported so far, which means:
    a. Any shape filled by bitmapped image is not supported yet. (You’ll get an empty image)
    b. Morphing shapes are not supported yet.
  4. May I use the original anchor point specified in .swf?
    Yes, you can. for ex:
    var myActor = F2CCast['F2CActor1'];
    myActor.draw(context, myActor.shapeOriginX, myActor.shapeOriginY);
  5. Why exported to PDF?
    PDF is the portable documentation format that not just store the compressed images(ex: JPG/GIF/PNG…) but also the vector shapes.
    Storing the vector shapes in the PDF is natively supported by Quartz Framework in both Mac OS and iOS.
    Reading pages of PDF and draw to the graphic context is extremely fast and easy.
    If Microsoft is using Word file as their native document format, in my personal opinion, PDF would be the one by Apple.



I am looking for a job, please contact me if you think I am qualified.



Related Posts

  1. Pingback: F2C vs Wallaby

Comments are closed.