About

fxCanvas is an implementation of HTML5 Canvas element for Internet Explorer (two-dimensional graphics only).

Usage

You need to download source (don't forget to file an issue when you find something bad) and unpack it.

Place in head section of the page following code:

<script type="text/javascript" src="path/to/joo-base.js"></script>
<!--[if IE]><script type="text/javascript" src="path/to/w3shim.js"></script><![endif]-->
<script type="text/javascript" src="path/to/fxcanvas.js"></script>
<!--[if IE]><script type="text/javascript" src="path/to/flashx.js"></script><![endif]-->
<comment><script type="text/javascript" src="path/to/canvasx.js"></script></comment>

If you are not familiar with Canvas API, it may be useful to read this:

New! fxCanvas works properly with data: URIs in Internet Explorer! Code sample.

Compatibility

fxCanvas supports almost all the Canvas features. The differences is in:

Invoke command and chaining operations

Context commands are keeping in a buffer before they will be applyed, so that to get values you must use method invoke():

var canvas = document.getElementById("cv");
var ctx = canvas.getContext("2d");
ctx.setFillStyle("#ff0")
    .setStrokeStyle("#0ff")
    .strokeRect(10, 20, 30, 30)
    .fillRect(30, 40, 50, 50)
    .invoke("getImageData", 0, 0, canvas.width, canvas.height, function (imageData) {
        // ... processing image data
    });
Images

Prior to using images you must preload them:

var canvas = document.getElementById("cv");
var ctx = canvas.getContext("2d");
var image_src = "sample.jpg";
canvas.onload = function(img) {
    if (img.src.indexOf(image_src) > -1) {
        ctx.drawImage(img, 10, 10);
    }
}
canvas.loadImage(image_src /* ... args: img1, img2, ... imgX */);
Image data array

Has a new format. Take a look at example:

var canvas = document.getElementById("cv");
var ctx = canvas.getContext("2d");
ctx.invoke("getImageData", 0, 0, canvas.width, canvas.height, function(buf) {
    for (var y = 0; y < canvas.height; y++) {
       for (var x = 0; x < canvas.width; x++) {
           var ofs = y * canvas.width + x,
               pixelValue = buf.data[ofs],
               red = pixelValue.charCodeAt(0),
               green = pixelValue.charCodeAt(1),
               blue = pixelValue.charCodeAt(2),
               alpha = pixelValue.charCodeAt(3);
           buf.data[ofs] = String.fromCharCode(red % 32, green % 64, blue % 128, alpha);
        }
    }
    ctx.invoke("putImageData", buf, 0, 0, function(){
        // ... and print out the buffer after the operation will be completed
        console.log("Image data dump:" + buf); 
    }
    // Note: Internet Explorer incorrectly displays strings with null (\x00) char.
});

Also notice that in Internet Explorer transition of data may take longer than it's generating. Workaround for this problem will be introduced in next version.

isPointInPath()

isPointInPath() in Internet Explorer returns true if point in bounding box of the path.

toDataURL()

To get canvas shot you must call the function with data handler:

var canvas = document.getElementById("cv");
var type = "image/jpeg", quality = .4; // quality is optional argument
canvas.toDataURL(type, quality, function (png_data) {
    // draw slice of the canvas on the same canvas at top right corner
    var ctx = this.getContext("2d");
    this.onload = function (img) {
        ctx.drawImage(img, 0, 0, canvas.width - 100, 0, 100, 100);
    }
    this.loadImage(png_data);
});

Possible types: image/png, image/jpeg, image/svg+xml.

Animation

There are two ways to making animation on Canvas. First case is using setInterval(), second case is using onframe event:

var ctx = document.getElementById("cv").getContext("2d");

variant one:

setInterval(function() {
    // ... frame drawing
}, 1000);

variant two:

ctx.canvas.frameDuration = 10; // in microseconds
ctx.canvas.onframe = function(){ // frame event handler will fired with interval in 10ms
    // ... frame drawing
};
// Warning: animations with complex graphics and tiny frameDuration value may hang on the browser!

Using onframe event is strongly encouraged, as in Internet Explorer, animation running on setInterval() will show incorrect frame rate.

Canvas in scripts

The simpliest way to dynamically create canvas element is:

var canvasElement = document.createElement("canvas");
canvasElement.setAttribute("width", 200);
canvasElement.setAttribute("height", 100);
document.body.appendChild(canvasElement);
// ... do some graphics on canvas

Note that if fxCanvas lib is loaded then in newly created elements will be using extended context by default. To disable this behavior and manually initialize fxcanvas context, use following code:

$Import(this, "buz.fxcanvas");
// don't forget to switch off fxcanvas before page content will loaded
this.fxcanvas.config.enable = false;
window.onload = function(){
  var canvas = document.createElement("canvas");
  this.fxcanvas.initElement(canvas)
  // ...

Context and Backend

There are a few two-dimensional Canvas contexts: extended via canvas.getContext("2d") and original via canvas.getBackend("2d"). Use last one if you want native drawing speed.

Composite operations

Only source-over and lighter are supported.

Demos and examples

Volunteers wanted! Couple of impossible tasks are there:

References

Bugs and feedbacks

What's up

fxCanvas 0.15d - supermario - (2010-05-26)

fxCanvas 0.15c - supermario - (2010-05-01)

fxCanvas 0.1a - Mario - (2010-04-14)

Download source (don't forget to file an issue when you find something bad).