I’ve just started trying to implement an animated game replay as a web service, using Canvas in FF/Safari. It’s pretty fast and effecitve, and I want to port it to IE.

The excanvas.js library gets me some way there - I believe this was based on your work. However, the clearRect() only does a global clear. For major performance reasons, I really need to be able to clear previously drawn elements selectively, and then redraw those areas. Clearing the entire canvas and redrawing it from scratch gets painfully slow when trying to animate a complex view.

I could probably get by if clearRect just deleted all existing elements that intersect the specified rectangle, or that are entirely contained within it. (with maybe even a mode switch to select which?). Is this feasible? I’ve had a quick look at the way the elements are set up in VML, and it seems there’s no easy way to delete an individual item in a path. Should I create separate canvasses for each component of the view, overlaid in each other, so that I can clear a specific canvas? How is page performance affected by having lots of overlaid canvasses?

One other thing I found out - I had a CSS rule that applied to divs nested in the same parent as my canvas elements. That was overriding the CSS that excanvas defines for the VML div. It was easy to fix by making the CSS rule more explicit, but it may be worth noting for other users.

Alan

When you create an image using CANVAS it shows perfect in the screen and in the print preview, but when you print (both in PS and PCL printers it prints very small (about 100 px for an image of 600px-600px) and with incorrect colors.

Is there a way to print canvas objects correctly?
tks,
ted

BTW: Someone asked way back if there is a way to make the drawings appear automatically. The following works for me.

“window.onload = function()
{ ieCanvasInit(); setTimeout(’draw()’,500); }”

As I am new to this canvas (and iecanvas) is there a list of methods you’ve implemented, e.g., createLinearGradient(…) and createRadialGradient(…)?

Also, IECanvas is no longer maintained, it has been merged with, and superseded by, ExplorerCanvas, see http://me.eae.net/archive/2006/03/28/explorercanvas/

I’ve come across a bug and was hoping someone could point me in the right direction. It seems that IE won’t render both a strokeStyle AND fillStyle when using the lineTo function.

Example:

var canvas = document.getElementById(’canvas’);
var ctx = canvas.getContext(’2d’);

ctx.fillStyle = ‘yellow’;
ctx.strokeStyle = ‘red’;
ctx.beginPath();
ctx.lineWidth = 1;
ctx.moveTo(1,1);
ctx.lineTo(80,80);
ctx.lineTo(100,20);
ctx.closePath();
ctx.stroke();
ctx.fill();

Only the stroke() function works. However, if I switch the order of the stroke() and fill() functions, then only fill() works. Any insight?

Thanks!