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

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

The most delicious features:

• flash is used as the output buffer for graphics, which gives a high rendering speed;
• near-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 images in the data: format;

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

Command chains and invoke method

FxCanvas uses a rather cunning way of communicating with a flash, thanks to which the time spent for transferring the buffer with commands is close to zero (I will not bother you with technical details, since you can find them out by looking at the sources). But as a disadvantage 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" ),<br>
ctx = canvas.getContext( "2d" );<br>
<br>
ctx.setFillStyle( "#ff0" )<br>
.setStrokeStyle( "#0ff" )<br>
.strokeRect(10, 20, 30, 30)<br>
.fillRect(30, 40, 50, 50)<br>
.invoke( "getImageData" , 0, 0, canvas.width, canvas.height, function (imageData) { <br>
// ... imageData - getImageData <br>
} );<br>


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

Pictures

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

var canvas = document .getElementById( "cv" ),<br>
ctx = canvas.getContext( "2d" ),<br>
image_src = "sample.jpg" ;<br>
<br>
canvas.onload = function (img) { <br>
if (img.src.indexOf(image_src) > -1) { <br>
ctx.drawImage(img, 10, 10);<br>
} <br>
} <br>
canvas.loadImage(image_src);<br>


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

Pixel map

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

var canvas = document .getElementById( "cv" ),<br>
ctx = canvas.getContext( "2d" );<br>
<br>
ctx.invoke( "getImageData" , 0, 0, canvas.width, canvas.height, function (buf)<br>
{ <br>
for ( var y = 0; y < canvas.height; y++)<br>
{ <br>
for ( var x = 0; x < canvas.width; x++)<br>
{ <br>
var ofs = y * canvas.width + x,<br>
pixelValue = buf.data [ ofs ] ,<br>
red = pixelValue.charCodeAt(0),<br>
green = pixelValue.charCodeAt(1),<br>
blue = pixelValue.charCodeAt(2),<br>
alpha = pixelValue.charCodeAt(3);<br>
<br>
buf.data [ ofs ] = String .fromCharCode(red % 32, green % 64, blue % 128, alpha);<br>
} <br>
} <br>
ctx.invoke( "putImageData" , buf, 0, 0, function () { ;<br>
// ... <br>
console.log( "Image data dump:" + buf);<br>
// , Internet Explorer \x00. <br>
} );<br>
} );<br>


And yes, it works rather 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 may have noticed, the data structure is different from the one stated in the specification. The new format is more efficient in processing time and memory.

Point in the contour?

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

Canvas shot

You can get through toDataURL() :

var canvas = document .getElementById( "cv" );<br>
var type = "image/jpg" , quality = .4; // - <br>
canvas.toDataURL(type, quality, function (png_data) { <br>
// <br>
var ctx = this .getContext( "2d" );<br>
this .onload = function (img) { <br>
ctx.drawImage(img, 0, 0, canvas.width - 100, 0, 100, 100);<br>
} <br>
this .loadImage(png_data);<br>
} );<br>


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

An example of working with a pixel map and a snapshot of the canvas.

Pixel blending operations (composite operations)

Only source-over and lighter implemented in fxCanvas. But in the future the rest will be added.

Download the source here , see examples and tests here .