Last 30 days

• Dec 23, 2009

  issue 63 (Error in IE8 with latest Vista service pack and security upd...) reported by wich...@wiggy.net   -   After applying a few months worth of updates to a Vista image I now get error when using the BeautyTip plugin, which uses excanas to do its rendering. The code looks like this: 1. context.fill() 2. this.stroke(true); 3. this.element_.insertAdjacentHTML("beforeEnd",a.join("")) At this point IE8 raises an "Invalid source HTML for this operation" exception.

  After applying a few months worth of updates to a Vista image I now get error when using the BeautyTip plugin, which uses excanas to do its rendering. The code looks like this: 1. context.fill() 2. this.stroke(true); 3. this.element_.insertAdjacentHTML("beforeEnd",a.join("")) At this point IE8 raises an "Invalid source HTML for this operation" exception.
• Dec 21, 2009

  issue 61 (Adding VML during stroke() takes a really long time) commented on by fabien.m...@gmail.com   -   DOM manipulation is very slow in IE, so, yes, this could be a special mode for ExCanvas, that could be specified as an option of the initElement method of the lib.

  DOM manipulation is very slow in IE, so, yes, this could be a special mode for ExCanvas, that could be specified as an option of the initElement method of the lib.
• Dec 21, 2009

  issue 60 (drawImage can't handle data uri images) commented on by fabien.m...@gmail.com   -   IE doesn't support data URIs in the VML image elements, so I guess this will never work before someone finds another way. Someone proposed a patch to use divs instead of a VML image, you maybe should try this one.

  IE doesn't support data URIs in the VML image elements, so I guess this will never work before someone finds another way. Someone proposed a patch to use divs instead of a VML image, you maybe should try this one.
• Dec 21, 2009

  issue 59 (HELP ME: Unknown runtime error) commented on by fabien.m...@gmail.com   -   Hello, sorry for the late reply, I tried the page you provided, but could not get the error neither the tooltip, did you do it another way ?

  Hello, sorry for the late reply, I tried the page you provided, but could not get the error neither the tooltip, did you do it another way ?
• Dec 21, 2009

  issue 62 (wrong height dimension adding a canvas element programmatica...) Status changed by fabien.m...@gmail.com   -   It will make a 300 pixels by 300 pixels canvas, with the default CSS size 300px * 150px. You will notice this if you draw a square on your canvas : it won't be square, but rectangular because of the default canvas' CSS size. You need to specify the CSS size : style="width: 300px; height: 300px;" and the canvas size as you did.

  Status: Invalid

  It will make a 300 pixels by 300 pixels canvas, with the default CSS size 300px * 150px. You will notice this if you draw a square on your canvas : it won't be square, but rectangular because of the default canvas' CSS size. You need to specify the CSS size : style="width: 300px; height: 300px;" and the canvas size as you did.

  Status: Invalid
• Dec 21, 2009

  issue 62 (wrong height dimension adding a canvas element programmatica...) reported by michele.carino   -   var domElement = document.createElement('canvas'); domElement.setAttribute('width', 300); domElement.setAttribute('height', 300); document.body.appendChild(domElement); Renders a canvas with a wrong height size. Exactly a 300*150 size canvas instead of a 300*300 one.

  var domElement = document.createElement('canvas'); domElement.setAttribute('width', 300); domElement.setAttribute('height', 300); document.body.appendChild(domElement); Renders a canvas with a wrong height size. Exactly a 300*150 size canvas instead of a 300*300 one.
• Dec 19, 2009

  issue 61 (Adding VML during stroke() takes a really long time) commented on by mbishop   -   Attached is a patch with a display list that is rendered at 24 fps.

  Attached is a patch with a display list that is rendered at 24 fps.
• Dec 19, 2009

  issue 61 (Adding VML during stroke() takes a really long time) reported by mbishop   -   An application that animates a canvas suffers greatly whenever stroke() is called. Using a JS profiler I was able to determine that the great majority of the time spent in stroke() is adding the VML to the element_. For an animation that only calls stroke() once per loop, this isn't that big of a deal. However, an animation that composes the scene with lots of paths and calls to stroke is pretty much unwatchable due to the problems with adding VML rapidly to a document. The VML items should be cached into a display list and rendered on a timely basis, rather than immediately during stroke(). This design would improve the performance of complex animations as well as reduce the CPU usage for the app itself.

  An application that animates a canvas suffers greatly whenever stroke() is called. Using a JS profiler I was able to determine that the great majority of the time spent in stroke() is adding the VML to the element_. For an animation that only calls stroke() once per loop, this isn't that big of a deal. However, an animation that composes the scene with lots of paths and calls to stroke is pretty much unwatchable due to the problems with adding VML rapidly to a document. The VML items should be cached into a display list and rendered on a timely basis, rather than immediately during stroke(). This design would improve the performance of complex animations as well as reduce the CPU usage for the app itself.
• Dec 07, 2009

  issue 60 (drawImage can't handle data uri images) reported by vzoran76   -   Hi, I would like to show data uri images like this in canvas object. <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh 0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAIp SURBVDjLddM9aFRBFIbh98zM3WyybnYVf4KSQjBJJVZBixhRixSaShtBMKUoWomgnaCxsJdgIQS stE4nEhNREgyoZYhpkogkuMa4/3fuHIu7gpLd00wz52PO MzMydu/Dy958dMwYioomIIgqDa+VnWrzebNUejY/NV6nQ8nlR4ufXt0fzm2WgxUgqBInAWdhemG bpcWNN9/XN27PPb1QbRdgjEhPqap2ZUv5+iOwvJnweT1m T5djZKjI6Ej/udz+wt1OJzAKYgWyDjJWyFghmzFsbtcY2gsTJwv09/Vc7RTgAEQgsqAKaoWsM8w u/z7a8B7vA8cHD3Fr+ktFgspO3a+vrdVfNEulJ/NT4zWn gCBYY1oqSghKI465fvYwW+VAatPX07IZmF7YfrC0uDE8emPmilOFkHYiBKxAxhmSRPlZVVa2FGO U2Ad2ap4zg92MDBXJZczFmdflx05VEcAZMGIIClZASdes S2cU/dcm4sTBArNzXTcNakiCb3/HLRsn4Fo2qyXh3WqDXzUlcgYnam3Dl4Hif82dbOiyiBGstSj g4majEpl8rpCNUQUjgkia0M5GVAlBEBFUwflEv12b/Hig 6SmA1iDtzhcsE6eP7LIxAchAtwNVxc1MnhprN/+lh0txErxrPZVdFdRDEEzHT6LWpTbtq+HLSDD iOm2o1uqlyOT37bIhHdKaXoL6pqhq24Dzd96/tUYGwPSB Vv7atFglaFIu5KLuPxeX/xsp7aR6AAAAAElFTkSuQmCC" /> IE8 can display it as a regular image but I cannot use this as an argument of function drawImage. I see only the default 'missing image' sign. Is it possible to display it on explorercanvas? What version of the product are you using? On what operating system? - explorer canvas R3 Thank you Zoran Vukoszavlyev

  Hi, I would like to show data uri images like this in canvas object. <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh 0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAIp SURBVDjLddM9aFRBFIbh98zM3WyybnYVf4KSQjBJJVZBixhRixSaShtBMKUoWomgnaCxsJdgIQS stE4nEhNREgyoZYhpkogkuMa4/3fuHIu7gpLd00wz52PO MzMydu/Dy958dMwYioomIIgqDa+VnWrzebNUejY/NV6nQ8nlR4ufXt0fzm2WgxUgqBInAWdhemG bpcWNN9/XN27PPb1QbRdgjEhPqap2ZUv5+iOwvJnweT1m T5djZKjI6Ej/udz+wt1OJzAKYgWyDjJWyFghmzFsbtcY2gsTJwv09/Vc7RTgAEQgsqAKaoWsM8w u/z7a8B7vA8cHD3Fr+ktFgspO3a+vrdVfNEulJ/NT4zWn gCBYY1oqSghKI465fvYwW+VAatPX07IZmF7YfrC0uDE8emPmilOFkHYiBKxAxhmSRPlZVVa2FGO U2Ad2ap4zg92MDBXJZczFmdflx05VEcAZMGIIClZASdes S2cU/dcm4sTBArNzXTcNakiCb3/HLRsn4Fo2qyXh3WqDXzUlcgYnam3Dl4Hif82dbOiyiBGstSj g4majEpl8rpCNUQUjgkia0M5GVAlBEBFUwflEv12b/Hig 6SmA1iDtzhcsE6eP7LIxAchAtwNVxc1MnhprN/+lh0txErxrPZVdFdRDEEzHT6LWpTbtq+HLSDD iOm2o1uqlyOT37bIhHdKaXoL6pqhq24Dzd96/tUYGwPSB Vv7atFglaFIu5KLuPxeX/xsp7aR6AAAAAElFTkSuQmCC" /> IE8 can display it as a regular image but I cannot use this as an argument of function drawImage. I see only the default 'missing image' sign. Is it possible to display it on explorercanvas? What version of the product are you using? On what operating system? - explorer canvas R3 Thank you Zoran Vukoszavlyev

Older

• Nov 30, 2009

  issue 59 (HELP ME: Unknown runtime error) commented on by vasiliev91   -   Project now in the development state, so just ignore the content of the site :)

  Project now in the development state, so just ignore the content of the site :)
• Nov 30, 2009

  issue 59 (HELP ME: Unknown runtime error) commented on by vasiliev91   -   Sorry, Line 155:9

  Sorry, Line 155:9
• Nov 30, 2009

  issue 59 (HELP ME: Unknown runtime error) reported by vasiliev91   -   Hello. On this page linkgator.net I have a jquery and boxy scripts. If you are choose the login in the top menu and don't type any data you take an error. Just hover on the error icon: Chrome, Firefox, Opera displays a tip (its uses Explorer Canvas script), but IE8 and IE7 does not display anything. In IE you takes an exception... Unknown runtime error Line: 16 Symbol (or char): 58 Code: 0 Explorer Canvas script loads dinamically. Thanx for help!

  Hello. On this page linkgator.net I have a jquery and boxy scripts. If you are choose the login in the top menu and don't type any data you take an error. Just hover on the error icon: Chrome, Firefox, Opera displays a tip (its uses Explorer Canvas script), but IE8 and IE7 does not display anything. In IE you takes an exception... Unknown runtime error Line: 16 Symbol (or char): 58 Code: 0 Explorer Canvas script loads dinamically. Thanx for help!
• Nov 28, 2009

  issue 58 (Picture neither rotated, nor scaled, nor transformed) reported by Raoul.Ki...@arcor.de   -   What steps will reproduce the problem? See code underneath. Works under Firefox but not IE8. What is the expected output? Picture rotated (resp. scaled or transformed). What do you see instead? Picture as without rotate (resp, scale or transform) function. What version of the product are you using? On what operating system? excancas r3 or r71, vista, ie8 Please provide any additional information below. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--[if IE]><script type="text/javascript" src="JS/excanvas.js"></script><! [endif]--> <title>Untitled Document</title> <script type="text/javascript"> function drawCanvas(){ var canvas = document.getElementById('canvas1'); var img = new Image(); img.onload = function(){ if(canvas.getContext){ var context = canvas.getContext('2d'); context.rotate(Math.PI / 4); // context.scale(1, 0.5); // context.setTransform(1, Math.PI / 4, 0, 1, 0, 0); context.drawImage(img, 0, 0, img.width, img.height, 0, 0, img.width, img.height); } } img.src = 'Italy/Calabria/Pizzo/Thumbs/Pizzo%20(011).jpg'; }</script> </head> <body onload="drawCanvas()"> <canvas id="canvas1" width="800" height="800"> </canvas> </body> </html> Thanks for your help

  What steps will reproduce the problem? See code underneath. Works under Firefox but not IE8. What is the expected output? Picture rotated (resp. scaled or transformed). What do you see instead? Picture as without rotate (resp, scale or transform) function. What version of the product are you using? On what operating system? excancas r3 or r71, vista, ie8 Please provide any additional information below. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--[if IE]><script type="text/javascript" src="JS/excanvas.js"></script><! [endif]--> <title>Untitled Document</title> <script type="text/javascript"> function drawCanvas(){ var canvas = document.getElementById('canvas1'); var img = new Image(); img.onload = function(){ if(canvas.getContext){ var context = canvas.getContext('2d'); context.rotate(Math.PI / 4); // context.scale(1, 0.5); // context.setTransform(1, Math.PI / 4, 0, 1, 0, 0); context.drawImage(img, 0, 0, img.width, img.height, 0, 0, img.width, img.height); } } img.src = 'Italy/Calabria/Pizzo/Thumbs/Pizzo%20(011).jpg'; }</script> </head> <body onload="drawCanvas()"> <canvas id="canvas1" width="800" height="800"> </canvas> </body> </html> Thanks for your help
• Nov 24, 2009

  issue 2 (selection artifacts when using canvas for drawing with mouse) Status changed by fabien.m...@gmail.com   -   Fixed by r71 which adds an overlay on top of the VML element.

  Status: Fixed

  Fixed by r71 which adds an overlay on top of the VML element.

  Status: Fixed
• Nov 24, 2009

  issue 2 (selection artifacts when using canvas for drawing with mouse) commented on by s.b...@kataf.nl   -   FIX: put a transparant div in top of your canvas

  FIX: put a transparant div in top of your canvas
• Nov 23, 2009

  r71 (Add an overlay to the VML canvas as well so that mouse event...) committed by erik.arvidsson   -   Add an overlay to the VML canvas as well so that mouse events works better.

  Add an overlay to the VML canvas as well so that mouse events works better.
• Nov 23, 2009

  issue 56 (drawImage(img, x, y, w, h) is translated for NON-rotated tra...) commented on by tins.jeremy   -   I have also encountered this problem. A Scale will also fix the translation issue, but also with the performance penalty from using filters to render the images: ctx.scale(0.00001,0.00001); I set about finding out where the difference comes from, and discovered that close to the origin the offset was small, and increased as the x,y of the image increased. Using trial and error I found the relationship between the true x,y and the translated x,y of the image to be 0.91. So if you multiply the image's x and y coordinates by 0.91 then the translation is correct. For all images you can modify line 567 in drawImage: vmlStr.push('top:', mr(d.y*0.91 / Z), 'px;left:', mr(d.x*0.91 / Z), 'px;'); I have tried to look for where this 0.91 comes from, but no avail.

  I have also encountered this problem. A Scale will also fix the translation issue, but also with the performance penalty from using filters to render the images: ctx.scale(0.00001,0.00001); I set about finding out where the difference comes from, and discovered that close to the origin the offset was small, and increased as the x,y of the image increased. Using trial and error I found the relationship between the true x,y and the translated x,y of the image to be 0.91. So if you multiply the image's x and y coordinates by 0.91 then the translation is correct. For all images you can modify line 567 in drawImage: vmlStr.push('top:', mr(d.y*0.91 / Z), 'px;left:', mr(d.x*0.91 / Z), 'px;'); I have tried to look for where this 0.91 comes from, but no avail.
• Nov 23, 2009

  issue 35 (circle arcs don't draw at most scales) commented on by sepiatonedragon   -   This problem may be related to the ones I was seeing. The attached patch addresses my problems, which mainly deal with performing graphics in a 0.0-1.0 coordinate system.

  This problem may be related to the ones I was seeing. The attached patch addresses my problems, which mainly deal with performing graphics in a 0.0-1.0 coordinate system.
• Nov 20, 2009

  issue 57 (Exception in onPropertyChange with the srcElement has no chi...) reported by jabradford   -   Changing the height/width of an empty excanvas causes an exception in onPropertyChange. Patch is attached.

  Changing the height/width of an empty excanvas causes an exception in onPropertyChange. Patch is attached.
• Nov 20, 2009

  issue 34 (SilverLight: Implement event redispatching) commented on by jwagsc...@spicecsm.com   -   I have the latest revision (r70) and the click events do not work when clicking on something that was drawn, but it does work when clicking on a blank portion of the canvas. Any thoughts?

  I have the latest revision (r70) and the click events do not work when clicking on something that was drawn, but it does work when clicking on a blank portion of the canvas. Any thoughts?
• Nov 19, 2009

  issue 56 (drawImage(img, x, y, w, h) is translated for NON-rotated tra...) commented on by s.b...@kataf.nl   -   A much simpler testcase: tested under both MSIE7 and MSIE8 Take an image of 400x600, render it like this: ctx.drawImage(img, 0, 0); ctx.drawImage(img, 400, 0); // displayed at 436px You'll see a gap of ~36px between the two images, if you prepend ctx.rotate(0.0001); the gap disappears, but you pay a serious performance penalty.

  A much simpler testcase: tested under both MSIE7 and MSIE8 Take an image of 400x600, render it like this: ctx.drawImage(img, 0, 0); ctx.drawImage(img, 400, 0); // displayed at 436px You'll see a gap of ~36px between the two images, if you prepend ctx.rotate(0.0001); the gap disappears, but you pay a serious performance penalty.
• Nov 17, 2009

  issue 56 (drawImage(img, x, y, w, h) is translated for NON-rotated tra...) commented on by s.b...@kataf.nl   -   I forgot to add that I ran this code in MSIE8. The following shows that the image is shifted off-center, and the cross is exactly at the right position (xCenter, yCenter) // render image around origin if(this.rotation==0.0) this.rotation = 0.001; // for MSIE ctx.translate(this.xCenter, this.yCenter); ctx.rotate(this.rotation / 180 * Math.PI); ctx.drawImage(this.img, -w/2, -h/2, w, h); // render cross, which should be centered ctx.strokeStyle = '#fff'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(-16,0); ctx.lineTo(+16,0); ctx.stroke(); ctx.beginPath(); ctx.moveTo(0,-16); ctx.lineTo(0,+16); ctx.stroke();

  I forgot to add that I ran this code in MSIE8. The following shows that the image is shifted off-center, and the cross is exactly at the right position (xCenter, yCenter) // render image around origin if(this.rotation==0.0) this.rotation = 0.001; // for MSIE ctx.translate(this.xCenter, this.yCenter); ctx.rotate(this.rotation / 180 * Math.PI); ctx.drawImage(this.img, -w/2, -h/2, w, h); // render cross, which should be centered ctx.strokeStyle = '#fff'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(-16,0); ctx.lineTo(+16,0); ctx.stroke(); ctx.beginPath(); ctx.moveTo(0,-16); ctx.lineTo(0,+16); ctx.stroke();
• Nov 17, 2009

  issue 56 (drawImage(img, x, y, w, h) is translated for NON-rotated tra...) reported by s.b...@kataf.nl   -   The following lines are required to render a image correctly. var w = this.img.width * s; var h = this.img.height * s; >> if(this.rotation==0.000) >> this.rotation = 0.001; // FIX for MSIE, positions it correctly ctx.translate(this.xCenter, this.yCenter); ctx.rotate(this.rotation / 180 * Math.PI); ctx.drawImage(this.img, -w/2, -h/2, w, h); Without it, the image is shifted (~16px??) to the right.

  The following lines are required to render a image correctly. var w = this.img.width * s; var h = this.img.height * s; >> if(this.rotation==0.000) >> this.rotation = 0.001; // FIX for MSIE, positions it correctly ctx.translate(this.xCenter, this.yCenter); ctx.rotate(this.rotation / 180 * Math.PI); ctx.drawImage(this.img, -w/2, -h/2, w, h); Without it, the image is shifted (~16px??) to the right.
• Nov 11, 2009

  r70 (Silverlight: Add a div overlay so that mouse events works. ...) committed by erik.arvidsson   -   Silverlight: Add a div overlay so that mouse events works. Add support for rgba, hsl and hsla and fix an issue with globalAlpha

  Silverlight: Add a div overlay so that mouse events works. Add support for rgba, hsl and hsla and fix an issue with globalAlpha
• Nov 10, 2009

  Instructions (This describes how to use excanvas.js in your page.) Wiki page commented on by m...@alasdair-scott.net   -   One answer seems to be to avoid HTML after the page load event. Thus the following code now works: {{{ var foo = document.getElementById("foo"); var canvas = document.createElement('canvas'); canvas.setAttribute("width", CANVAS_WIDTH); canvas.setAttribute("height", CANVAS_HEIGHT); foo.appendChild(canvas); }}} To stress this, may I suggest replacing occurrences of {{{ el.innerHTML = ''; }}} in the library with {{{ while (el.childNodes.length > 0) el.removeChild(el.childNodes[0]); }}}

  One answer seems to be to avoid HTML after the page load event. Thus the following code now works: {{{ var foo = document.getElementById("foo"); var canvas = document.createElement('canvas'); canvas.setAttribute("width", CANVAS_WIDTH); canvas.setAttribute("height", CANVAS_HEIGHT); foo.appendChild(canvas); }}} To stress this, may I suggest replacing occurrences of {{{ el.innerHTML = ''; }}} in the library with {{{ while (el.childNodes.length > 0) el.removeChild(el.childNodes[0]); }}}
• Nov 10, 2009

  issue 31 (drawImage positioning error) commented on by AaronGoodisman   -   It's somewhat irksome, however, that as of November 10, 2009, R3 is still the latest version available on the downloads page. I can confirm the bug fixed in r69, however.

  It's somewhat irksome, however, that as of November 10, 2009, R3 is still the latest version available on the downloads page. I can confirm the bug fixed in r69, however.
• Nov 10, 2009

  issue 31 (drawImage positioning error) commented on by AaronGoodisman   -   As of November 10, 2009, R3 is the latest version available for download from the downloads page. Please explain.

  As of November 10, 2009, R3 is the latest version available for download from the downloads page. Please explain.
• Nov 10, 2009

  Instructions (This describes how to use excanvas.js in your page.) Wiki page commented on by m...@alasdair-scott.net   -   The definition test for 'G_vmlCanvasManager' fails with Chrome. Using 'typeof' works for me: {{{ var canvas = document.getElementById("cv"); if (typeof(G_vmlCanvasManager) != 'undefined') canvas = G_vmlCanvasManager.initElement(canvas); }}} Also I am experiencing the same "Unknown runtime error" with IE8 that others have reported with initElement. Will report back here, or the issue list when I track it down. My case involves adding a canvas inside a containing div, e.g.: {{{ ... append('<div id=\"foo\"><canvas width=\"400\" height=\"300\"></canvas></div>'); ... }}}

  The definition test for 'G_vmlCanvasManager' fails with Chrome. Using 'typeof' works for me: {{{ var canvas = document.getElementById("cv"); if (typeof(G_vmlCanvasManager) != 'undefined') canvas = G_vmlCanvasManager.initElement(canvas); }}} Also I am experiencing the same "Unknown runtime error" with IE8 that others have reported with initElement. Will report back here, or the issue list when I track it down. My case involves adding a canvas inside a containing div, e.g.: {{{ ... append('<div id=\"foo\"><canvas width=\"400\" height=\"300\"></canvas></div>'); ... }}}
• Nov 09, 2009

  issue 55 (IE8 draw on loop issue) reported by ashesmage   -   What steps will reproduce the problem? 1. open IE 8 2. go to http://www.ashes.ro/tabs What is the expected output? What do you see instead? all the tabs should be drawing like the last one. you can see that only the last tab is drawing. What version of the product are you using? On what operating system? the last version of excanvas (r3). Windows Vista 64 SP 1. Please provide any additional information below. For drawing the tabs I used a loop ( each() ).

  What steps will reproduce the problem? 1. open IE 8 2. go to http://www.ashes.ro/tabs What is the expected output? What do you see instead? all the tabs should be drawing like the last one. you can see that only the last tab is drawing. What version of the product are you using? On what operating system? the last version of excanvas (r3). Windows Vista 64 SP 1. Please provide any additional information below. For drawing the tabs I used a loop ( each() ).
• Nov 09, 2009

  issue 54 (Dragon curve with many lineTo() calls crashes IE.) reported by steve.te...@britseyeview.com   -   What steps will reproduce the problem? 1. Edit the attached file to increase the order of the dragon curve above 12 (The point in the code is marked with a comment) 2. Open the file in IE6 What is the expected output? Open file in Firefox 3. What do you see instead? IE crashes - looks like some sort of resource problem - there are many many lineTo() calls. What version of the product are you using? Latest from Google Code On what operating system? Windows XP Professional

  What steps will reproduce the problem? 1. Edit the attached file to increase the order of the dragon curve above 12 (The point in the code is marked with a comment) 2. Open the file in IE6 What is the expected output? Open file in Firefox 3. What do you see instead? IE crashes - looks like some sort of resource problem - there are many many lineTo() calls. What version of the product are you using? Latest from Google Code On what operating system? Windows XP Professional
• Nov 04, 2009

  issue 53 (CSS typo in silverlight/excanvas.js) reported by mbishop   -   in the init_() function, line 71 adds a stylesheet string to the canvas object. One property is misspelled. It says "backgroun:transparent" It should say "background:transparent"

  in the init_() function, line 71 adds a stylesheet string to the canvas object. One property is misspelled. It says "backgroun:transparent" It should say "background:transparent"
• Nov 03, 2009

  issue 52 (Drawing blocks Canvas element if the Canvas is hidden during...) commented on by mathijas   -   I found it! Lines 307 and 308 (function CanvasRenderingContext2D_) should be changed from: el.style.width = surfaceElement.clientWidth + 'px'; el.style.height = surfaceElement.clientHeight + 'px'; to: if(surfaceElement.clientWidth > 0) { el.style.width = surfaceElement.clientWidth + 'px'; el.style.height = surfaceElement.clientHeight + 'px'; } else if(surfaceElement.style.width != "0px") { el.style.width = surfaceElement.style.width; el.style.height = surfaceElement.style.height; } else { el.style.width = "100px"; el.style.height = "100px"; } It is probable that cannot draw any symbol on element that is (0x0)px - which is the default value of clientWidth and clientHeight for hidden element. Regards, MT

  I found it! Lines 307 and 308 (function CanvasRenderingContext2D_) should be changed from: el.style.width = surfaceElement.clientWidth + 'px'; el.style.height = surfaceElement.clientHeight + 'px'; to: if(surfaceElement.clientWidth > 0) { el.style.width = surfaceElement.clientWidth + 'px'; el.style.height = surfaceElement.clientHeight + 'px'; } else if(surfaceElement.style.width != "0px") { el.style.width = surfaceElement.style.width; el.style.height = surfaceElement.style.height; } else { el.style.width = "100px"; el.style.height = "100px"; } It is probable that cannot draw any symbol on element that is (0x0)px - which is the default value of clientWidth and clientHeight for hidden element. Regards, MT
• Nov 03, 2009

  issue 52 (Drawing blocks Canvas element if the Canvas is hidden during...) reported by mathijas   -   What steps will reproduce the problem? 1. Canvas is hidden (display: none) or is inside hidden div 2. Drawing on such Canvas does not work and it even blocks the Canvas from further drawings (after displaying - display: "") 3. Drawing (for the first time) simultaneously on hidden and displayed Canvas works only for the displayed Canvas, the hidden gets blocked 4. Displaying (display: "") the Canvas before the first drawing makes it drawable normally 5. If I display the Canvas (display: ""), then draw, then hide it (display: none), then draw further, and then display it back - everything works normally - only the first drawing is crucial. What version of the product are you using? On what operating system? The newest version of excanvas + Windows XP/Vista + IE 7/8 (not tested on 6) Please provide any additional information below. I have tried to debug everything I could, the functions' launches seem to be in right order but I may have lost something important...

  What steps will reproduce the problem? 1. Canvas is hidden (display: none) or is inside hidden div 2. Drawing on such Canvas does not work and it even blocks the Canvas from further drawings (after displaying - display: "") 3. Drawing (for the first time) simultaneously on hidden and displayed Canvas works only for the displayed Canvas, the hidden gets blocked 4. Displaying (display: "") the Canvas before the first drawing makes it drawable normally 5. If I display the Canvas (display: ""), then draw, then hide it (display: none), then draw further, and then display it back - everything works normally - only the first drawing is crucial. What version of the product are you using? On what operating system? The newest version of excanvas + Windows XP/Vista + IE 7/8 (not tested on 6) Please provide any additional information below. I have tried to debug everything I could, the functions' launches seem to be in right order but I may have lost something important...
• Oct 29, 2009

  Instructions (This describes how to use excanvas.js in your page.) Wiki page commented on by abramov.andrey   -   Great respect for your job!

  Great respect for your job!
• Oct 23, 2009

  issue 50 (Long lines are consistently truncated) commented on by o...@iola.dk   -   Scrap that, 9000 didn't work with a native IE 8. I'm back to a chunk size of 5000. I'm going to release a version of excanvas with this patch with Flot very soon.

  Scrap that, 9000 didn't work with a native IE 8. I'm back to a chunk size of 5000. I'm going to release a version of excanvas with this patch with Flot very soon.
• Oct 22, 2009

  issue 51 (A restricted set of font families and style is supported) reported by fabien.m...@gmail.com   -   Not all the combinations of font family/weight are supported. For example this style won't give the expected result : font: normal normal bold 10px sans-serif; It will draw something like : font: normal normal bold 10px "Times New Roman"; Note that "Times new roman" is not a sans-serif font. See the bug report here : http://code.google.com/p/canvas-text/issues/detail?id=4 There is information about this here : http://docs.dojocampus.org/dojox/gfx/#implementation-notes We should have a list of "easy" font families (arial, verdana, times new roman). But I'm not sure the result will be perfect.

  Not all the combinations of font family/weight are supported. For example this style won't give the expected result : font: normal normal bold 10px sans-serif; It will draw something like : font: normal normal bold 10px "Times New Roman"; Note that "Times new roman" is not a sans-serif font. See the bug report here : http://code.google.com/p/canvas-text/issues/detail?id=4 There is information about this here : http://docs.dojocampus.org/dojox/gfx/#implementation-notes We should have a list of "easy" font families (arial, verdana, times new roman). But I'm not sure the result will be perfect.
• Oct 22, 2009

  issue 50 (Long lines are consistently truncated) commented on by o...@iola.dk   -   For 6567 points I get 113122 characters. For 9568 points I get 113134 characters. For 9577 I get 113240 characters. So I'd like to retract my string length limit theory. :) I've done some more testing, a chunk size of 9000 seem to work fine too. I can draw 100.000 points in one line.

  For 6567 points I get 113122 characters. For 9568 points I get 113134 characters. For 9577 I get 113240 characters. So I'd like to retract my string length limit theory. :) I've done some more testing, a chunk size of 9000 seem to work fine too. I can draw 100.000 points in one line.
• Oct 21, 2009

  Instructions (This describes how to use excanvas.js in your page.) Wiki page commented on by john.gabel.the.third   -   Tip: if you are unable to call your init function from body.onload (eg your header stuff is handled in code you can't alter), it seems to work to add an explicit call to initElement in your init function like this: {{{ var G_vmlCanvasManager; // so non-IE won't freak out in canvasInit function canvasInit() { var cv = document.getElementById("cv"); if (G_vmlCanvasManager != undefined) { // ie IE G_vmlCanvasManager.initElement(cv); } if (cv.getContext) { var ctx = cv.getContext('2d'); ... } } }}} And then call canvasInit from within script tags just after the canvas element is defined. It seems weird that IE (7, at least) would instantiate G_vmlCanvasManager but consistently fail to get through its init routine in time, but this has worked for me.

  Tip: if you are unable to call your init function from body.onload (eg your header stuff is handled in code you can't alter), it seems to work to add an explicit call to initElement in your init function like this: {{{ var G_vmlCanvasManager; // so non-IE won't freak out in canvasInit function canvasInit() { var cv = document.getElementById("cv"); if (G_vmlCanvasManager != undefined) { // ie IE G_vmlCanvasManager.initElement(cv); } if (cv.getContext) { var ctx = cv.getContext('2d'); ... } } }}} And then call canvasInit from within script tags just after the canvas element is defined. It seems weird that IE (7, at least) would instantiate G_vmlCanvasManager but consistently fail to get through its init routine in time, but this has worked for me.
• Oct 21, 2009

  issue 50 (Long lines are consistently truncated) commented on by o...@iola.dk   -   One guess is that the limit here is not actually the number of points, but how long the VML string becomes? You could try repeating the experiment and output how long the string is in each case.

  One guess is that the limit here is not actually the number of points, but how long the VML string becomes? You could try repeating the experiment and output how long the string is in each case.
• Oct 21, 2009

  issue 50 (Long lines are consistently truncated) commented on by o...@iola.dk   -   Interesting. I looked into it, and here's a patch against r69. It looks a bit long because of the reindentation, but the gist of it is just the addition of this outer loop: for (var j = 0; j < this.currentPath_.length; j += chunkSize) which changes the inner loop to for (var i = j; i < Math.min(j + chunkSize, this.currentPath_.length); i+\ +) { if (i % chunkSize == 0 && i > 0) { // move into position for next chunk lineStr.push(' m ', mr(this.currentPath_[i-1].x), ',', mr(this.currentPath_[i-1].y)); } ... The idea is to divide the current path into chunks and construct each of them separately, inserting an extra point in the beginning of each chunk from the end of the previous one except for the first chunk. I have set chunk size to 5000 which in the light of your test appears to be a conservative estimate. Note that this patch does not fix fills so they are still broken. I'm not sure but I think fixing fills requires using some kind of divide and conquer technique on the shape. I've added some remarks about it.

  Interesting. I looked into it, and here's a patch against r69. It looks a bit long because of the reindentation, but the gist of it is just the addition of this outer loop: for (var j = 0; j < this.currentPath_.length; j += chunkSize) which changes the inner loop to for (var i = j; i < Math.min(j + chunkSize, this.currentPath_.length); i+\ +) { if (i % chunkSize == 0 && i > 0) { // move into position for next chunk lineStr.push(' m ', mr(this.currentPath_[i-1].x), ',', mr(this.currentPath_[i-1].y)); } ... The idea is to divide the current path into chunks and construct each of them separately, inserting an extra point in the beginning of each chunk from the end of the previous one except for the first chunk. I have set chunk size to 5000 which in the light of your test appears to be a conservative estimate. Note that this patch does not fix fills so they are still broken. I'm not sure but I think fixing fills requires using some kind of divide and conquer technique on the shape. I've added some remarks about it.
• Oct 21, 2009

  issue 50 (Long lines are consistently truncated) commented on by fabien.m...@gmail.com   -   I tried with noPoints = 9567 and everything is drawn, but nearly nothing when noPoints = 9568. It will be totally drawn when noPoints = 9577 ... VML stops drawing when the path is too long. As you said, a new path should be inserted when it becomes too long, but it seems to be hard to know what is the real limit.

  I tried with noPoints = 9567 and everything is drawn, but nearly nothing when noPoints = 9568. It will be totally drawn when noPoints = 9577 ... VML stops drawing when the path is too long. As you said, a new path should be inserted when it becomes too long, but it seems to be hard to know what is the real limit.
• Oct 21, 2009

  issue 50 (Long lines are consistently truncated) commented on by fabien.m...@gmail.com   -   It looks like the limit is 9567. I tried with noPoints = 9567 and everything is drawn, but nearly nothing when noPoints = 9567. VML stops drawing when the path is too long ...

  It looks like the limit is 9567. I tried with noPoints = 9567 and everything is drawn, but nearly nothing when noPoints = 9567. VML stops drawing when the path is too long ...
• Oct 21, 2009

  issue 50 (Long lines are consistently truncated) reported by o...@iola.dk   -   Start a new path. Call lineTo a sufficiently large number of times, say 10000 times. Stroke it. Only a fraction of the line segments are drawn (maybe 20%). Test case attached (it assumes excanvas.js is placed in the same directory). Try playing with noLines and noPoints. With noLines = 1 and noPoints = 1000, the complete waveform is drawn in my IE 6. With noLines = 1 and noPoints = 10000, only the first part of the waveform is drawn. With noLines = 10 and noPoints = 1000, ten complete waveforms are drawn. So the problem is not that IE is incapable of drawing so many line segments, it just can't happen in the same line. Conclusion: excanvas should chop the lines up when converting it to VML. I've tested this with the latest excanvas.js on IE 6. There's a bug report in Flot in case you're interested: http://code.google.com/p/flot/issues/detail?id=201

  Start a new path. Call lineTo a sufficiently large number of times, say 10000 times. Stroke it. Only a fraction of the line segments are drawn (maybe 20%). Test case attached (it assumes excanvas.js is placed in the same directory). Try playing with noLines and noPoints. With noLines = 1 and noPoints = 1000, the complete waveform is drawn in my IE 6. With noLines = 1 and noPoints = 10000, only the first part of the waveform is drawn. With noLines = 10 and noPoints = 1000, ten complete waveforms are drawn. So the problem is not that IE is incapable of drawing so many line segments, it just can't happen in the same line. Conclusion: excanvas should chop the lines up when converting it to VML. I've tested this with the latest excanvas.js on IE 6. There's a bug report in Flot in case you're interested: http://code.google.com/p/flot/issues/detail?id=201
• Oct 20, 2009

  r69 (Fix pt font size. Thanks goes to Christophe VG for finding a...) committed by erik.arvidsson   -   Fix pt font size. Thanks goes to Christophe VG for finding and fixing this.

  Fix pt font size. Thanks goes to Christophe VG for finding and fixing this.
• Oct 19, 2009

  issue 47 (Rounded strokes becomes angular when resizing the browser wi...) commented on by ulrik.gae   -   True. The rounded corners gets shrinked by a += operator when resizing turning the corner radius into a sqare corner.

  True. The rounded corners gets shrinked by a += operator when resizing turning the corner radius into a sqare corner.
• Oct 19, 2009

  issue 49 (ctx.arc() with a 2*PI angle won't draw anything) reported by fabien.m...@gmail.com   -   What steps will reproduce the problem? 1. Try to draw a circle clockWise, sometimes it won't draw as the delta between the start point and the end point is very small. 2. 3. What is the expected output? What do you see instead? A complete circle but nothing appears Change line 689 : if (xStart == xEnd && !aClockwise) { to if ((abs(xStart - xEnd) < 10e-8) && !aClockwise) {

  What steps will reproduce the problem? 1. Try to draw a circle clockWise, sometimes it won't draw as the delta between the start point and the end point is very small. 2. 3. What is the expected output? What do you see instead? A complete circle but nothing appears Change line 689 : if (xStart == xEnd && !aClockwise) { to if ((abs(xStart - xEnd) < 10e-8) && !aClockwise) {
• Oct 19, 2009

  issue 37 (excanvas breaks if canvas element has no children) Status changed by fabien.m...@gmail.com   -  

  Status: Invalid

  Status: Invalid
• Oct 19, 2009

  issue 45 (drawImage coordinate error) Status changed by fabien.m...@gmail.com   -  

  Status: Fixed

  Status: Fixed
• Oct 19, 2009

  issue 47 (Rounded strokes becomes angular when resizing the browser wi...) Status changed by fabien.m...@gmail.com   -   The problem is present in Firefox too, so this is a bug in the LiquidCanvas library.

  Status: Invalid

  The problem is present in Firefox too, so this is a bug in the LiquidCanvas library.

  Status: Invalid
• Oct 15, 2009

  issue 48 (Fails to draw on IE8) commented on by jerome.eteve   -   My mistake; if I draw the graph on the page loaded event, everything works fine. No need for compatibility mode forcing.

  My mistake; if I draw the graph on the page loaded event, everything works fine. No need for compatibility mode forcing.