Develop Reference

SVG javascript animation is janky on firefox but smooth on chrome

I have a simple wireframe renderer, outputting with svg. An example of use is on the site:
https://0polymer0.github.io/implementation/Teapot/Teapot.html
Polygon elements, representing triangles, are updated in an animation loop.
The svg renderer works well on Chrome, but not on Firefox. Can this be fixed? And if not, why?
I think the performance relevant code is here:
for(let i = 0; i < mesh.length; i++){
dom_mesh[i].setAttributeNS(null,
"points",
triangle2D_to_string(screenspace_mesh[i])
);
}
Things I've tried
Converting childElements() output to an array (dom_mesh) didn't change anything. Reading from children didn't change anything. And directly accessing attributes rather than assigning strings to "points" didn't change anything.
I think the problem has to do with writing to svg, because the benchmarks suggest that's where the browser is spending most of its time.
I'm open to this approach being unworkable, I'm just surprised it is working as well as it is on chrome. It would be nice to understand why.

Canvas – createRadialGradient() not working as expected in Chrome v65

When using context.createRadialGradient() on a 2d context, the gradient is not rendering as expected in Chrome v65.
The example above is from MDN, but it's also happening in some of my own code.
The gradient works fine in Firefox v59, Safari v11. It fails in Opera v52, so maybe it's a new bug in webkit? I've tested this on two different computers, so shouldn't be anything in my local setup causing it.
Anybody else experiencing this bug or better yet know how to fix it?
EDIT: Found an open issue on Chromium here.
Apparently this is not a consistent bug, and should be fixed in v66 if I'm reading the comments correctly.

As mentioned in the post above, there's an issue in Chromium v65. It should all be fixed in v66.
If you do need to fix it right now, the hacky way is to make sure that the gradient doesn't receive identical x and y arguments for the first and the second circle:
var gradient = ctx.createRadialGradient(100,100,100,100,100,0); // Doesn't work
var gradient = ctx.createRadialGradient(100,100,100,100.001,100,0); // Works
You can see the fix in effect here. Happy hacking!

Animating gradients in SVG using JavaScript. Weird behaviour of Internet Explorer

I am trying to animate a ratings control (star) by updating the gradient coordinates.
Please find the svg here. This is perfectly working in firefox. but in Internet explorer (IE 11), it is not getting rendered. I tried by removing polygons and adding them back. But nothing worked. In chrome, for first second first star is filled, then erased and getting animated! Please look into this.
Thanks in advance :)
[Update]:
I am able to produce animation in the control I referred above. check the link. I donot know y, but in IE (ie11) updating a gradient using JavaScript is not updating the polygon using the gradient. In ff & chrome , after updating gradient data we can observe the change in poolygon or some other object using the gradient. So, in IE, rather than updating existing svg oibjects, I started removing object, creating a new object with updated data and added to SVG tree. It started working. But it is an overhead. Anyone can suggest be a better approach! And, initial blink in chrome and IE still exists. As of now, I am hiding the initial blink by using timer function in code after calling animate() object. Can anyone help in solving this?
thanks

IE9 3d surface chart

I'm looking for an API or some sort of solution to do 3d surface charts within IE9, and I like how javascript-surface-plot works, but it does not work in IE9.
Are there any other ways to do 3d rendering like that for charts in IE9?
I'm using Telerik controls for my other charts, but they do not seem to have a 3d surface chart.
I've also considered the use of a java applet, but would like to keep the load lightweight.
Flash is not an option.
Just to clarify, when I say "3d" I don't mean shiny bar charts. I mean a x,y,z rendered scene that can be rotated with the mouse similar to how java-script-surface-plot is done.
Thanks!

If you like the 3D surface plot in JavaScript and you want to use IE it seems as though you just need to take use of explorercanvas (a polyfill) to make it work in IE. It's just adding another JavaScript file though, and this way you don't need to use any plugins or applets!

I've never used this, but d3 looks pretty cool and might do the job. Take a look at this example.
Edit:
After further investigation, I'm not sure that's what you'd need, though d3 does look pretty good, wouldn't you admit?
It does appear it'd be pretty easy to change it to work in IE9
take a look at this function in SurfacePlot.js
function createCanvas()
{
canvas = document.createElement("canvas");
if (isIE())
{
G_vmlCanvasManager.initElement(canvas);
canvas.style.width = width;
canvas.style.height = height;
}
//...rest of the code here
}
It'd bee tempted to just remove those lines relating to isIE() in your local copy and say if you're using IE8, be damned ! (That or attempt to use Flash Canvas). IE8 has little support for VML, and I think excanvas runs even slower in IE8 than IE7.

Oops. Looks like my isIE() function was well out of date. I've now added better IE and canvas-support detection to the surface plot. Sorry for the hassle. http://code.google.com/p/javascript-surface-plot/downloads/detail?name=JSSurfacePlot-V1.5.zip&can=2&q=

Trouble with Canvas rendering in Safari/Opera

Been banging my head against this one for a while, and figured I'd turn to the experts for some advice.
I've made a jQuery snippet that grabs the values from a table and plots them in a line graph on a canvas element (also generated by the JS). All's well in Firefox and Chrome, but Safari and Opera aren't displaying the plotted points. I've reviewed in Firebug, Web Inspector debugger, JSLint, and checked the markup with the w3 validator, but still can't find anything glaringly obvious. I've also tried including the canvas element in the HTML rather than generating it dynamically, as well as substituting a tag pair for the self-closing tag I've been using—all to no avail.
Any chance one of you guys could help me out?
Thanks!

I draw lots of lines in Safari so I checked my code and the pattern is...
beginPath
moveTo
lineTo(s)
closePath or stroke
In your code moveTo is before beginPath, so I switched that in one of my apps and it stopped drawing, so try switching those around.

I think this is a problem of the time when you call stroke(). Try to call it only after the for loop, and try differents positions of the closePath call.