Develop Reference

HTML5 Canvas TextBaseline Top looks different in Firefox and chrome

In canvas, while setting textBaseline property to 'top', its rendering differently in chrome and firefox. In chrome, there is a gap between line and the text where as there is no gap in firefox.
Kindly refer this to view in your browser, any help would be thankful.
I also checked similar issue reported long-back. Is there any work-around in firefox to get it work fine?

I agree with the OP that this is an issue and it's peculiar to Firefox. Increasingly though, it seems that Firefox has adjusted the vertical offset overtime. It was once once about 4 pixels, then 3. Now, it is almost imperceptible. So, I agree with #Kaiido above. Use/set *object*.textBaseline="alphabetic"; I believe that this is consistent across browsers.

SVG rendering artifacts in Chrome

I've noticed that, when repainting filled SVG paths (due to color/opacity changes triggered by mouse event handlers, for instance), the repaint is sometimes glitchy on Chrome:
I haven't seen this behavior in Firefox, Opera, or Safari (haven't tested IE yet.)
Any ideas on how to fix this? Some more details: the SVG in question is generated by d3, and makes heavy use of <use>, <clipPath>, and <g transform="...">; the screenshot you see uses CSS opacity rules, but I've seen the same thing from updating the fill color in CSS or JavaScript.

SVG text redraw incorrect when scaling in Safari

When scaling an SVG element that contains text the text fails to redraw correctly. This problem only seems to occur in Safari (tested in Safari 5.1.7) on the desktop, it renders correctly on the iPad, and in the other major browsers, including the developer preview of Safari 6
See the following jsfiddle for a demonstration of the problem.
http://jsfiddle.net/aBW25/
Viewers that experience the problem will not see the white text in the center of the red square, or the text will be rendered incorrectly.
Run the demo in a browser such as Chrome or Firefox to see the correct output.
Has anyone else experienced this problem or know of a way to get around it?
Thanks

Pixastic doesn't work properly in Safari

I'm using the Pixastic javascript library to make several images on a webpage grayscale. It works in Chrome and Firefox, but not in Safari. Sometimes it makes a few random images grayscale, and sometimes it doesn't do anything at all.
Here's a test page to demonstrate the problem: http://www.edwards.nl/new/test.html
I'm using Safari 5.1.1 on Mac OSX Lion.
Does anyone know what the problem is? I couldn't find a solution anywhere yet.
Edit: It appears that the canvas elements are created, but the grayscaling part doesn't work.

html5 <canvas> extremely slow on Opera 11?

We implemented graph drawing with html5's element + JavaScript. View it here.
It works in Chrome 12, Firefox 3.6 and 4, and in Opera 11.
The drawing speed is fine in Chrome and Firefox when interacting with the mouse (hover and scroll to zoom) or when switching properties with the graph controls. But in Opera 11.11 it takes ages to redraw. I tried on two different machines, one with Windows and the other with Linux.
Any ideas why this is so? Or how I could find out what the problem is?

Filling each path with context.globalCompositeOperation = "destination-over"; took 35ms for each of the ~200 layers in Opera.
Fortunately there was a way I could use context.globalCompositeOperation = "source-over"; without destroying the visual, making the speed way closer to the one in Firefox and Chrome.
I found out by using the following two lines inspired by the profiler code, James Black posted a link to:
time=new Date().getTime(); //this line before the code block to test
//code block under test
time=new Date().getTime() - time; opera.postError(time +'ms'); //this line after the code block to test
Note that Chrome (Webkit) already has a built in JavaScript profiler, and in Firefox the Firebug Extension also allows easy profiling. But I didn't find anything similar for Opera.