EaselJS

If you have Python installed, you can quickly start a local web server for testing your EaselJS project. Navigate to your project's root directory in your terminal and run the following command:

python -m SimpleHTTPServer

Once started, your project will be accessible at http://localhost:8000/.

The SVGExporter allows you to export an EaselJS Stage or Container to an SVG format. It supports most EaselJS features, including vector art, sprites, text, and bitmaps.

Note: This feature is currently experimental and has not been extensively tested. For full technical details, refer to the documentation within the SVGExporter.js source file.

EaselJS provides several distribution files depending on whether you need stable releases, the latest development updates, or minified files for production.

• Use easeljs.js for the most recent stable tagged version (useful for debugging).
• Use easeljs.min.js for the most recent stable tagged version, minified for deployment.
• Use easeljs-NEXT.js for the latest in-progress EaselJS classes.
• Use easeljs-NEXT.min.js for a minified version of the latest updates.

Note: WebGL support is provided via StageGL, which is included in the minified source files.

You can pass a FauxCanvas instance to a createjs.Stage instead of a standard HTML5 <canvas> element. This is useful for performance profiling or benchmarking, as it eliminates the browser-specific overhead of drawing graphics to the screen, allowing you to isolate the time spent specifically within EaselJS logic.

Note that FauxCanvas is considered a rough implementation and may lack certain methods or properties required by specific EaselJS features.

var stage = new createjs.Stage(new FauxCanvas(500, 400));

You can generate structured reports from automated performance tests by appending the report parameter to the test URL. This sends the results to a specific report template (e.g., table.html) for analysis.

To run a test multiple times for each library version and output the results to a table, use the auto parameter to specify the number of iterations and the report parameter to specify the template name.

myTest.html?auto=5&report=table

Use createjs.ScaleBitmap to render a bitmap texture using a 3x3 grid (often called a "Scale9" approach). This allows you to scale an image while preserving the integrity of its corners.

How the scaling works:

• Corners: Rendered at 100% scale in their current container.
• Top and bottom edges: Stretched horizontally.
• Left and right edges: Stretched vertically.
• Center region: Stretched in both directions.

To use it, provide the image source and a createjs.Rectangle that defines the center region (x, y, width, height) of the grid. Use setDrawSize(width, height) to define the final dimensions of the scaled shape.

var sb = new createjs.ScaleBitmap(imagePathOrSrc, new createjs.Rectangle(10, 10, 80, 80));
sb.setDrawSize(newWidth, newHeight);
stage.addChild(sb);

The Context2DLog utility logs all method calls and property changes on a Context2D object. This is useful for debugging how EaselJS features translate into standard Canvas API calls or for identifying optimization opportunities.

// setup:
var myCanvas = document.getElementById("foo");
var logger = new Context2DLog(myCanvas);

// enable or disable:
logger.setEnabled(false);

// implement custom logging:
logger.logMethod = function(method, args, returned) { ... };
logger.logProperty = function(prop, oldVal, newVal) { ... };

BitmapCache is used to render a DisplayObject into an image (a canvas or a WebGL texture) instead of re-rendering its complex parts every frame. This is highly effective for containers with many parts that do not change often.

Key usage notes:

• Caching is a visual process. It is best used on containers, not single Bitmap objects.
• A cached object will not visually update until update() is explicitly called.
• Caching is a prerequisite for applying certain filters efficiently.

WebGL vs Context2D:

• Use options.useGL = 'stage' when working with a StageGL to use high-performance RenderTextures (GPU-side textures).
• Use options.useGL = 'new' to create a new StageGL instance for the cache.
• If useGL is undefined, it defaults to a standard Context2D canvas cache.

StageGL handles the loading and uploading of image data to the GPU. When an image is used in a Bitmap or Sprite, StageGL manages its lifecycle within a texture batch. If an image is not yet loaded, StageGL attaches a load listener to update the texture data once the image is ready.

Note on VRAM: If you encounter errors regarding texture creation, it is often due to exceeding available VRAM. Ensure you are releasing WebGL texture instances when they are no longer needed.