Is excanvas supposed to be faster than this in IE7?
Mark Wyszomierski
I am giving excanvas a try but am still finding it really slow on
internet explorer. I made a 200 x 200 canvas, and am trying to
rectfill each pixel to see how long it takes. Here's the full test
script:
<html>
<head>
<!--[if IE]><script type="text/javascript" src="../excanvas.js"></
script><![endif]-->
<script type="text/javascript">
var canvas, ctx;
function load() {
canvas = document.getElementById("cv");
ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
var xEnd = 200 - 1;
for (var y = 0; y < 200; y++) {
for (var x = 0; x < xEnd; x++) {
ctx.fillRect (x, y, x+1, y);
}
}
}
</script>
</head>
<body onload="load();">
<canvas id="cv" width="200" height="200"></canvas>
</body>
</html>
It renders the area in about 1 second in firefox, but in IE7 it takes
about 2 minutes to finish! Is this how slow it's supposed to be or am
I missing something? Sometimes I really do not like microsoft. It even
renders faster on my iPhone!
Thanks,
Mark
Erik Arvidsson
SVN? It would be interesting to see how it compares. Another thing
to that might be interesting is to profile the code and see if there
is room for improvement (I'm sure there is).
One thing to add here is that your example is not very typical. Why
would one do 40 000 1x1 rects when you can do one single rect for
this? There is hardy ever any reason to paint "pixels" using canvas
since the primitives provides you with the basic building blocks you
need.
--
erik
Mark Wyszomierski
In reality I need to be able to set all 200 x 200 'pixels' to
different colors at runtime. The reason I'd want to do this is to do
some simulation of image processing. Even if it takes about 2 seconds
to set all 40,000, that's acceptable.
I'll try using the silverlight version from SVN, I'm kinda new to
excanvas, I'm assuming I'm just going to pull out a new js file from
the repository and replace my existing excanvas.js file with that?
Thanks,
Mark
On Apr 23, 12:36 pm, "Erik Arvidsson" <erik.arvids...@gmail.com>
wrote:
>
> - Show quoted text -
Mark Wyszomierski
I'd like to give this silverlight implementation a try.
I just attempted to use native VML for a speed test, it was still way
too slow. To render about 30 x 30 rects takes over a minute easily.
Thanks,
Mark
Mark Wyszomierski
http://excanvas.svn.sourceforge.net/viewvc/excanvas/silverlight/excanvas.js?view=log
I'm assuming we need to have silverlight installed on our PC...do we
also need to be running IE 8, or will IE 7 do?
Thanks,
Mark
Mark Wyszomierski
install silverlight, use the excanvas silverlight branch, and install
IE 8 beta.
Rendering 200 x 200 rects now took ~14 seconds on my machine, a huge
improvement over the 5 minutes it took previously I guess with the VML
calls the original excanvas is using?
Though it's better, it's disappointing that microsoft can't get their
stuff together to just support the <canvas> tag like everyone else.
Even with this big silverlight addition, it's still much much slower
than firefox and safari!
Thanks,
Mark
On Apr 23, 5:10 pm, Mark Wyszomierski <mar...@gmail.com> wrote:
> Ok I found the silverlight version on sourceforge here:
>
Klaus Reimer
> It renders the area in about 1 second in firefox, but in IE7 it takes
> about 2 minutes to finish! Is this how slow it's supposed to be or am
> I missing something?
It's pretty normal that excanvas is so slow in this example. Imagine:
Real browsers are simply putting a single pixel into a real 2D context.
But IE (With the help of excanvas) creates a VML element with lots of
attributes and inserts it into the DOM and then the browser draws the
new VML element. And this is done 40000 times.
I think it may be possible to optimize excanvas so your example would
run faster. excanvas could check if it's just going to draw an unrotated
simple filled rectangle and in this case it could simply insert a <div>
with a background color instead of a bloated VML shape element. But I'm
not sure if it's worth the try... Maybe the if statement is going to
slow down excanvas in all other situations.
--
Bye, K <http://www.ailis.de/~k/>
[A735 47EC D87B 1F15 C1E9 53D3 AA03 6173 A723 E391]
(Finger k...@ailis.de to get public key)
Klaus Reimer
> In reality I need to be able to set all 200 x 200 'pixels' to
> different colors at runtime. The reason I'd want to do this is to do
> some simulation of image processing.
If it's always the case that your canvas has 40000 Pixels which are
accessed separately then maybe you can simply do it without a canvas.
Write some javascript code which generates and positions 40000 div
Elements and store the references into a javascript array. Then you can
set pixels by changing the background color of a specific div. Maybe
this is much faster in IE then creating 40000 VML shapes every time you
update your image.
Here is a demo:
http://www.ailis.de/~k/permdata/20080429/canvas.html
Takes some time to create the 40000 pixels but changing all their colors
in IE7 takes 1-2 seconds on my machine. Maybe this can be optimized
further. Haven't checked that.