fxCanvas 0.1a — релиз «эмулятора» тега Canvas для Internet Explorer

Вышла первая стабильная версия «эмулятора» тега Canvas для Internet Explorer — fxCanvas 0.1a `Mario`.

Самые вкусные особенности:

• в качестве выходного буфера для графики используется флеш, что дает высокую скорость отрисовки;
• близкая к совершенству реализация Canvas API;
• базовая поддержка текста;
• возможность работы с массивом пикселей;
• определение точки-в-контуре;
• возможность загружать картинки в формате data:;

fxCanvas практически полностью реализует Canvas API, но с некоторыми особенностями.

Цепочки комманд и метод invoke

В fxCanvas используется довольно хитрый способ общения с флешом, благодаря которому время, затрачиваемое для передачи буфера с командами, близко к нулю (не буду утомлять техническими подробностями, так как вы можете их узнать, заглянув в исходники). Но как недостаток этого способа — для получения результата контекстной функции нужно вызывать метод через обертку invoke. Взгляните на пример:

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
    });


В этом примере обработчик вызывается после того, как контекстные команды будут выполнены (и да, это цепочка команд).

Картинки

Для предзагрузки картинок в fxCanvas добавлен метод loadImage:

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


Кроме того, картинки могут быть в формате data: URI.

Карта пикселей

Карта пикселей (image data), вероятно, одна из самых интересных особенностей fxCanvas, так как эта штука предоставляет разработчикам возможность реализовывать различные эффекты «не выходя из браузера». Например вот так:

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.
    });
});


И да, это работает достаточно медленно в Internet Explorer, в отличие от его конкурентов (хотя есть некоторое решение этой проблемы, оно будет добавлено в следующей версии).

Кстати, как вы наверно заметили, структура данных отличается от той, что заявлена в спецификации. Новый формат более эффективен по времени обработки и занимаемой памяти.

Точка в контуре?

В Internet Explorer метод isPointInPath(x, y) возвращает положительное значение если x, y находится в границах контура. В остальных браузерах — если внутри заливки контура.

Снимок холста

Можно получить через 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);
});


Это похоже на вызов invoke, где возращаемое значение передается фунции-обработчику.
Тип картики может быть «image/jpeg» или «image/png» (по умолчанию).

Пример работы с картой пикселей и снимком холста.

Операции смешивания пикселей (composite operations)

В fxCanvas реализованы только source-over и lighter. Но в будущем будут добавлены остальные.

Скачать исходники можно здесь, посмотреть примеры и тесты здесь.