fxCanvas 0.1a - release of "emulator" of the Canvas tag for Internet Explorer

The first stable version of the "emulator" of the Canvas tag for Internet Explorer has been released - fxCanvas 0.1a `Mario`.

The most delicious features:

• a flash is used as the output buffer for graphics, which gives a high rendering speed;
• close to perfect implementation of the Canvas API;
• basic text support;
• the ability to work with an array of pixels;
• point-in-loop definition;
• the ability to upload pictures in a format data:;

fxCanvas almost completely implements the Canvas API, but with some features.

Command chains and invoke method

FxCanvas uses a rather tricky way of communicating with a flash, thanks to which the time taken to transfer a buffer with commands is close to zero (I will not bore you with technical details, as you can find them by looking at the source). But as a drawback of this method - to get the result of the context function, you need to call the method through the invoke wrapper. Take a look at an example:

var canvas = document.getElementById("cv"),

    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) {

        // ... imageData - возвращаемые данные getImageData

    });



In this example, the handler is called after the context commands are executed (and yes, this is a chain of commands).

Images

To preload images in fxCanvas, the loadImage method has been added:

var canvas = document.getElementById("cv"),

    ctx = canvas.getContext("2d"),

    image_src = "sample.jpg";



canvas.onload = function(img) {

    if (img.src.indexOf(image_src) > -1) {

        ctx.drawImage(img, 10, 10);

    }

}

canvas.loadImage(image_src);



In addition, pictures can be in data:URI format .

Pixel Map

The pixel map (image data) is probably one of the most interesting features of fxCanvas, as this thing gives developers the opportunity to implement various effects "without leaving the browser." For example, like this:

var canvas = document.getElementById("cv"),

    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 () {;

        // ... и распечатаем буфер по завершении операции

        console.log("Image data dump:" + buf);

        // Заметьте, Internet Explorer не отображает текст с символом \x00.

    });

});



And yes, it works quite slowly in Internet Explorer, unlike its competitors (although there is some solution to this problem, it will be added in the next version).

By the way, as you probably noticed, the data structure is different from the one stated in the specification. The new format is more efficient in processing time and occupied memory.

Point in the circuit?

In Internet Explorer, the method isPointInPath(x, y)returns a positive value if x, y is within the boundaries of the path. In other browsers, if inside the outline fill.

Canvas snapshot

Can be obtained through toDataURL():

var canvas = document.getElementById("cv");

var type = "image/jpg", quality = .4; // качество картинки - необязательный аргумент

canvas.toDataURL(type, quality, function (png_data) {

    // следущий код будет рисовать кусок холста на том же самом холсте

    var ctx = this.getContext("2d");

    this.onload = function (img) {

        ctx.drawImage(img, 0, 0, canvas.width - 100, 0, 100, 100);

    }

    this.loadImage(png_data);

});



This is similar to invoke, where the return value is passed to the function handler.
The type of image can be “image / jpeg” or “image / png” (default).

An example of working with a pixel map and a canvas image.

Pixel mixing operations

In fxCanvas, only source-overand are implemented lighter. But in the future the rest will be added.

You can download the sources here , see examples and tests here .