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