nhatanhit / flashcanvas Goto Github PK

What steps will reproduce the problem?
1. get from http://flashcanvas.net/download source code. 
2. load 
FlashCanvas-20110201\FlashCanvas\examples\canvas-text.googlecode.com\svn\trunk\e
xamples\animation.html
3.add after draw(); line with code "var aaaa = canvas.toDataURL();".
4. crash.
5. trouble in flashcanvas.js, in function e: this.B.CallFunction does not 
exists. I check this: e:function()
{
    alert("========e");
    var a=this.H();
    alert(a);
    alert(a.length);
    //alert(this.B.CallFunction);
    var str = "";
    for (var asdasd in this.B)
        str += asdasd + " : " + this.B[asdasd] + "  ;  ";
    var div = document.createElement("div");
    div.innerHTML = str;
    document.body.appendChild(div);
    alert(str);
    if(a.length>0)
        return eval(this.B.CallFunction('<invoke name="executeCommand" returntype="javascript"><arguments><string>'+a.join("&#0;")+"</string></arguments></invoke>"))
}
Output into current page:
nextSibling : [object HTMLSpanElement] ; onresizeend : null ; onrowenter : null 
; aria-haspopup : ; childNodes : [object NodeList] ; ondragleave : null ; oncut 
: null ; clientHeight : 150 ; onbeforepaste : null ; ondragover : null ; 
onbeforecopy : null ; aria-disabled : ; onpage : null ; recordNumber : null ; 
previousSibling : null ; nodeName : OBJECT ; onbeforeactivate : null ; 
accessKey : ; currentStyle : [object CSSCurrentStyleDeclaration] ; onfocusin : 
null ; onbeforeeditfocus : null ; oncontrolselect : null ; aria-hidden : ; 
onblur : null ; hideFocus : false ; style : [object CSSStyleDeclaration] ; 
onbeforedeactivate : null ; dir : ; aria-expanded : ; onkeydown : null ; 
nodeType : 1 ; ondragstart : null ; scrollTop : 0 ; onscroll : null ; 
onpropertychange : null ; ondragenter : null ; id : externalms__id8 ; 
aria-level : 0 ; onrowsinserted : null ; onmovestart : null ; scopeName : HTML 
; lang : ; onmouseup : null ; aria-busy : ; oncontextmenu : null ; language : ; 
offsetWidth : 300 ; onerror : null ; onbeforeupdate : null ; onreadystatechange 
: null ; filters : [object] ; onresize : null ; isContentEditable : false ; 
aria-checked : ; aria-readonly : ; oncopy : null ; onselectstart : null ; 
scrollHeight : 150 ; onmove : null ; ondragend : null ; onrowexit : null ; 
lastChild : [object HTMLParamElement] ; aria-secret : ; onactivate : null ; 
canHaveChildren : false ; onfocus : null ; isMultiLine : true ; onmouseover : 
null ; offsetTop : 63 ; parentNode : [object HTMLGenericElement] ; tagName : 
OBJECT ; className : ; canHaveHTML : false ; onmousemove : null ; title : ; 
role : ; behaviorUrns : [object BehaviorUrnsCollection] ; onfocusout : null ; 
onfilterchange : null ; disabled : false ; parentTextEdit : [object 
HTMLBodyElement] ; ownerDocument : [object HTMLDocument] ; offsetParent : 
[object HTMLBodyElement] ; aria-posinset : 0 ; ondrop : null ; ondblclick : 
null ; onrowsdelete : null ; tabIndex : 0 ; onkeypress : null ; aria-relevant : 
; onlosecapture : null ; innerText : ; aria-live : ; parentElement : [object 
HTMLGenericElement] ; ondeactivate : null ; aria-labelledby : ; aria-pressed : 
; children : [object HTMLCollection] ; ondatasetchanged : null ; 
ondataavailable : null ; aria-invalid : ; onafterupdate : null ; nodeValue : 
null ; onmousewheel : null ; onkeyup : null ; readyState : 4 ; aria-valuenow : 
; aria-selected : ; onmouseout : null ; aria-owns : ; aria-valuemax : ; 
onmoveend : null ; document : [object HTMLDocument] ; firstChild : [object 
HTMLParamElement] ; sourceIndex : 11 ; outerText : ; isTextEdit : false ; 
scrollLeft : 0 ; isDisabled : false ; oncellchange : null ; runtimeStyle : 
[object CSSStyleDeclaration] ; scrollWidth : 300 ; aria-valuemin : ; 
onlayoutcomplete : null ; onhelp : null ; attributes : [object NamedNodeMap] ; 
offsetHeight : 150 ; onerrorupdate : null ; contentEditable : inherit ; 
onmousedown : null ; aria-setsize : 0 ; clientWidth : 300 ; onpaste : null ; 
tagUrn : ; onmouseleave : null ; clientLeft : 0 ; onclick : null ; outerHTML :

Method CallFunction does not exists!

What is the expected output? What do you see instead?


What version of the product are you using? On what operating system?
ie 8,7 windows 7. in compatibility modes flashcanvas does not work.

Hello,

Thanks for such a great job!

I wanted to see if it could work with some other examples than the ones 
included in the download package.

I took the trails experiment from http://hakim.se/experiments/html5/trail/03/ 
and modified it a bit to handle correctly IE.

But after modification, it seems not working in this case (except of course on 
other browsers than IE).

Could you take a look at the code and tell me what's wrong ?

Thanks a lot !

This works for polygons. Will probably not work if there are transformations 
etc. applied:

    this.pointInPoly = function pointInPoly(pos, poly) {
        /* This code is patterned after [Franklin, 2000]
        http://www.geometryalgorithms.com/Archive/algorithm_0103/algorithm_0103.htm
        Tells us if the point is in this polygon */
        cn = 0
        pts = poly.slice();
        pts.push([poly[0][0], poly[0][1]]);
        for (var i=0; i<poly.length; i++)
            if (((pts[i][1] <= pos[1]) && (pts[i+1][1] > pos[1])) || ((pts[i][1] > pos[1]) && (pts[i+1][1] <= pos[1])))
                if (pos[0] < pts[i][0] + (pos[1] - pts[i][1]) / (pts[i+1][1] - pts[i][1]) * (pts[i+1][0] - pts[i][0]))
        cn += 1
        return cn % 2
    }

What steps will reproduce the problem?

    // Create a canvas element
    var offcanvas = document.createElement('canvas');

    if (typeof FlashCanvas == "object") {
        FlashCanvas.initElement(offcanvas);
    }

    offcanvas.width = 100;
    offcanvas.height = 100;

    var offctx = offcanvas.getContext('2d');

    // This line will toss a JS "Error: Unspecified error."
    var imageData = offctx.getImageData(0, 0, 100, 100);


What is the expected output? What do you see instead?

getImageData should work with a canvas created with createElement()


What version of the product are you using? On what operating system?

Flashcanvas v1.4,  Windows XP, IE 8.0, Flash 10.1.102.64


Please provide any additional information below.

getImageData() appears to work fine with a canvas that is on screen, but 
doesn't work with an off screen JavaScript created one.  

What steps will reproduce the problem?

trying to get image of a div present in html page 

below method throws error...

_executeCommand: function() {
        // execute commands
        var commands = this._flush();
        if (commands.length > 0) {
            var typp =     "<invoke name='executeCommand' returntype='javascript'><arguments><string>" + commands.join("&#0;") + "</string></arguments></invoke>"
            return eval(this._swf.CallFunction( typp ));
        }
    }



What is the expected output? What do you see instead?
Error while executing eval method


What version of the product are you using? On what operating system?
using flashcanvas with html2canvas with IE8 window 7

Please provide any additional information below.
tried all things to work html2canvas on IE8 but nothing working 
flashcanvas.js gives some hope, but it also throws error..I'm trying to solve 
this in past couple of days.. but nothing gets to work.

Any kind of help will be appreciated..


working fine with ie 9+ versions.

What steps will reproduce the problem?

1. Try to load an image from the same domain that hosts flashcanvas.swf (which 
may be different to the domain of the enclosing page), using a full URL e.g. 
'http://example.com/image.png'

What is the expected output? What do you see instead?

There's no need for a crossDomainPolicy file or proxying here, because we're on 
the SWF domain. However, when a full URL is used (as is required when our SWF 
is on a different server, such as a CDN), flashcanvas tries to proxy 
unnecessarily. This breaks images if proxy.php isn't set up, or results in 
excess server load if it is.

What version of the product are you using? On what operating system?

FC 1.5 Pro, IE6 and IE8

Please provide any additional information below.

I've worked around this for now by setting window.FlashCanvasOptions = 
{usePolicyFile: true}; -- but it would be nice if FlashCanvas could recognise 
when the server that's part of a full images path matches the server from which 
the SWF is served, and treat this as a same-origin load.

Fix ssl

What steps will reproduce the problem?
1. Extract directory from zip
2. Open example2.html in chrome and IE and compare.  This actually works 
fine using excanvas


What is the expected output? What do you see instead?
Same as chrome and excanvas

What version of the product are you using? On what operating system?
Latest 1.1 I think??

Please provide any additional information below.

I found this issue when testing my system using flashcanvas.  Performance 
is great compared to excanvas so good work there.  The attached example is 
slightly modified version of jit.js (found at thejit.org) to allow dynamic 
creation of flashcanvas.

I did not try going through the code bases to see what the problem could be 
as I don't have the time right now but hopefully you can find it easily.  I 
highly doubt this is a jit.js as this works in native canvas and excanvas.  
However there is hack code for excanvas on line 643 of jit.org.  You can 
see that I have added the same hack to get it working with flashcanvas.

Feel free to email me if you have more questions

[email protected]

Thanks

Guido

What steps will reproduce the problem?
ctx.fontSize = '400 23px Arial;
ctx.measureText('wwwwwwwwwwwww').width
ctx.measureText('wwwwwwwwwwwwwww').width

What is the expected output?
221
255

What do you see instead?
195
225

What version of the product are you using? On what operating system?
Win 7

If I render 117 textures I get ~30 FPS
but adding one more instance gets me aroung 1-2 FPS
How can I help debug this issue?

What steps will reproduce the problem?
1. Create a canvas
2. Bind an event handler to the mousemove event for the canvas, e.g.: 

myCanvas.onMouseMove = doSomething()

3. View the canvas and move the mouse

What is the expected output? What do you see instead?
- Expect the doSomething() to fire.

It seem like flashcanvas supports mouse click events, but not mouse move. 

http://home.syranide.com/fcerr.html

Using the latest FlashCanvas 1.21 (pro).

Issuing isPointInPath() before the last fill() for the frame causes that fill 
to be drawn at the bottom rather than at the top if one uses a timer with 1ms 
interval. If using a larger interval, say 100ms, that fill will instead flicker 
(rendered at bottom first, then on top).

Removing the call to isPointInPath() makes everything normal again.

Hi, 

     I am using Flashcanvas.js and able to draw Signature in canvas but i am getting error when i want save the image. 
Object does not support property or method 'toDataURL'.

Refer my code below.

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

if (typeof FlashCanvas != "undefined")
  {
      FlashCanvas.initElement(canvas);
      image.src = canvas.toDataURL();
  }


Regards 
Himanshu

What steps will reproduce the problem?

We received the attached e-mail but no license key. Is a license key needed for 
this product and if so, can I get a copy?

Thanks,

Steve Moore
[email protected]
972-506-3754 

What steps will reproduce the problem?
1. Create an Image Object in javascript. 
2. Assign to the SRC property of the image base64 encoded data such as this:
image.src = 'data:image/png;base64,iVBORw0KGgoAAAANS...' (data truncated)
3. Use the drawImage method to load the image into the canvas.

What is the expected output? What do you see instead?
I expect the image to be loaded into the canvas, instead I see and I get a 
javascript error on line 24. Like 24 has too many instructions and I can't find 
the exact place.

What version of the product are you using? On what operating system?
I am trying to use it on IE8 on Windows XP, I don't know the version, I 
downloaded it a week ago from the page.

Please provide any additional information below.

The image data is obtained dynamically from a database stored in MYSQL, through 
PHP. 

This method works well in browsers that do not require flashcanvas, such as 
Firefox, Chrome, Opera and Safari.

see attach example (from explorercanvas.googlecode.com)

What steps will reproduce the problem?
1. var myCanvas = document.createElement('canvas');
2. document.body.appendChild(myCanvas);
2. FlashCanvas.initElement(myCanvas);
3. var ctx = myCanvas.getContext('2d');
4. ctx.measureText(42); // Exception thrown
5. ctx.measureText('42'); // OK

What is the expected output? What do you see instead?
Expected output: {"width": 12}
Result: Exception thrown

What version of the product are you using? On what operating system?
FlashCanvas 1.5 on IE8, Windows 7 32bit

Please provide any additional information below.
measureText() should always convert it's argument to a string to avoid these 
situations

What steps will reproduce the problem?
1.Download Flashcanvas pro or free edition
2.Just test some examples with Internet Ecplorer 8 (XP)


What is the expected output?
All output expected in the folder examples in the package

 What do you see instead?
nothing just nothing work ! 

What version of the product are you using? On what operating system?
the latest. I work on XP

When including the script in IE8 it will produce an error in the console (and 
stop working) like this:

flashcanvas.js, line 24 character 56
SCRIPT16389: Unknown name.

I thought I'd try the same with the source version, and the same error pops up 
at line 777.

I tried putting the script in the HEAD and at the bottom just above my project 
javascript. Either produce the error.

Looking at the call stack, the error is coming from line 1008, in toDataURL, 
which is exactly the reason why I moved from excanvas to flashcanvas :(

In my setup, Flash is functioning normally. No weird filters or anything. I'm 
running Flash 11.5.502.149 on Windows x64 and (obviously) IE8. Honesty requires 
me to say that this is IE10-preview in IE8 mode. 

Any help?

screen from user in attach

Hello.

drawImage() does not support data URL.
Please support it!

Hi,
I've been working on this project for a few days, and made a few 
additions :

 - basic support of text drawing (taking font style/size/weight/family 
into account) thanks to code from FxCanvas
 - custom menu with two options : "Save image as" and "Go to project page" 
(FxCanvas)
 - added a few data types as they are in the spec for future use 
(CanvasPixelArray, ImageData and TextMetrics)
 - added a server side script taking as POST parameter a data URI scheme 
for image download
 - added support for JPEG for the toDataUrl method
 - added examples from the canvas-text project
 - minor optimization in the JS file 
 - the JS file doesn't have to be the last one in the document for the 
script to work

I'm aware that some parts on this work may have already been implemented 
in the Pro version, but I wanted to share it, with my personal point of 
view. I of course attached the patch.

Using a mix of save()/restore() and polygon drawing, I noticed the strokeStyle 
randomly failed to apply.

Reading the open source version of FlashCanvas.js, I noticed properties are 
written before pushing state to the stack in save() while they're not written 
after popping state from the stack in restore().

I tried to add writing properties at the end of the restore() function in the 
minified FlashCanvas Pro :
line 12, col 478, after "this.a.push("C")", added ";this.h(15)"

I'm not sure of what i've done exactly since the code is minified but it solved 
my random problem.

What do you think ?

Draw a path using a few hundred coordinates, like so:
...
ctx.lineTo( 1.5, 1.3 );
ctx.lineTo( 3.0, 9.0 );
ctx.lineTo( 3.7, 7.8 );
ctx.lineTo( 4.5, 6.5 );
...

This works nicely in IE9/FF7/Chrome yet is drawn incorrectly in IE6 and 7 (and 
probably 8 too, didn't test that)

See http://jsfiddle.net/TXJ9M/2/

Problem appears in both Flashcanvas-20110201 and r221.

I notice the changelog indicates that this issue has been resolved; however, 
I'm using flashcanvas_pro compiled in august 2011 and still encountering it.

What steps will reproduce the problem?
1. save context
2. create a path
3. clip
4. transform
5. drawImage
6. restore

Here is a screenshot of the difference between firefox and IE
http://i.imgur.com/KXKGr.png

I saw some issues arise from drawImage so I've tried adding loadImage with no 
success.

note: the image being drawn is being pulled from a second canvas

What steps will reproduce the problem?
1. create the canvas && get 2d context
2. set font to the @font-face family name
3. fillText, the default font is displayed

What is the expected output? What do you see instead?
I should see the embed font (from the @font-face declaration)

What version of the product are you using? On what operating system?
version 20101115
Windows XP/7 IE 6/7/8

Please provide any additional information below.
Native canvas supports custom embedded fonts.

I want to use flashcanvas[pro] in a project of mine, wich loads some polyfills 
dynamically, if a feature isn't implemented.

For this flashcanvas has to support async loading.

I made the following changes to get this work:

1. Picking up options, instead of using the setOptions-method:
//CONSTATNT
var OPTIONS = window.FlashCanvas || {};

2. Configuring the path in getScript:
function getScriptUrl() {
    if(OPTIONS.path){return OPTIONS.path;}
    //...
}
3. Looking for the document.readyState-property:
// initialize canvas elements
document.attachEvent(ON_READY_STATE_CHANGE, onReadyStateChange);
if(document.readyState === "complete"){
    onReadyStateChange();
}

It would be great, if you could support async loading.

A canvas has two sizes - the intrinsic dimensions specified in CSS pixels which 
define the coordinate space size, and the layout size controlled by styles. (In 
most cases, the coordinate space size matches the dimensions of an underlying 
bitmap, though this is explicitly not required in the HTML5 draft standard.)

Of note from the HTML5 draft: "During rendering, the image is scaled to fit 
this layout size."

flashcanvas does not implement this behavior.

1. Construct a canvas that is scaled, e.g.:

<div style="width: 300px; height: 200px; border: solid 2px red;">
<canvas width="50" height="50" style="width: 100%; height: 100%;">
</div>

2. Draw a rectangle that fills the canvas e.g. fillRect(0,0,50,50)

Example: http://calormen.com/tmp/fctest.htm

Expected:

The canvas element and drawing is scaled - i.e. a 300x200 rectangle will appear 
on screen, completely filling the container. This is seen in browsers that 
natively implement Canvas - Chrome, Safari, and Firefox. 

Actual:

In IE the object element is set to an explicit width: 50px, height: 50px; the 
rect fills only this space.

Environment:

This is with the 2010-09-04 version of flashcanvas, in IE8 on WinXP.

Notes:

Adding <param name="scale" value="exactfit"> to the script which generates the 
tag would, in theory, allow the canvas to scale. Trying this, then resetting 
the object to have 100% width/height does scale the object, but the graphics 
still appear to be scaled to actual device pixels (possibly due to logic in the 
SWF?). 

ExCanvas doesn't support this either (although I've suggested patches for it.)

What steps will reproduce the problem?
1. Unzip the zipfile
2. Copy flashcanvas trunk to a subfolder called 'flashcanvas'
3. Run test1.html and test2.html

These two files are identical except for the order of drawing the image vs 
drawing the text.

> What is the expected output? What do you see instead?

Both tests should produce the same image, as they do with native canvas. 
Instead, test2.html only renders the fillText() once on the first frame using 
FlashCanvas.

> What version of the product are you using? On what operating system?

SVN revision 174.

Flash element (<object>) which is dynamically included to page by flashcanvas 
has always http protocol in codebase attribute.
It cause popup with certifcate error in IE.

Solution:
replace 
'<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#
version=9,0,0,0" width="100%" height="100%" id="external'

with

'<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
codebase="'+document.location.protocol+'//fpdownload.macromedia.com/pub/shockwav
e/cabs/flash/swflash.cab#version=9,0,0,0" width="100%" height="100%" 
id="external'