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.
Related
I have been making a simple website with AngularJS and D3JS and created a custom circle mesh library (very crude). It all works fine in Firefox but it doesn't work in Chrome. The website is up at petoknm.github.io . In my homepage I have this circle mesh thing that displays the circles. But when I transition (directly) to another page with this circle mesh (programmming page) it starts behaving differently. And when I go from programming to home it starts to ignore the clipPath on the first two images (two probably because of the two images in the programming page). The svg is identical (I checked only the first three 'a' tags with the images and the first three clipPaths) to the correct svg that was there first... I don't know what happens.
This is a screenshot just after first loading the page
http://i.stack.imgur.com/2fAI6.png
This is a screenshot after coming from the programming page
http://i.stack.imgur.com/JLO3r.png
As you can see the clipPath is still in the svg and "shown" by Chrome but is not actually used (or is ignored).
Please help, I have no idea why it happens and why it's no problem for Firefox
I'll make an educated guess and say it's because your programming page is reusing ids "#clippath0" and "#clippath1". Because it's a single page site and you are replacing the parts of the DOM that contain those references, perhaps there is a bug in Chrome where it getting confused over what they point to.
Try using different sets of ids for each page and see if that fixes it. Maybe you could add different prefixes for each page (eg "#homeclippath0" and "#programmingclippath0").
It does seem like a bug in Chrome though. Perhaps you might want to report it.
I wrote a function whose purpose is to re-draw a square line block (which cover whole page) every time when the window size is changed.
http://jsfiddle.net/9hVnZ/
The problem is that
bgCtx.clearRect(0, 0, bgCtx.width, bgCtx.height);
didn't work for me: As my Chrome browser size changed, the previous red lines does not clear as I thought.
reproduced screenshot:
http://i.imgur.com/6aePMLm.png
I tried browse other answered questions, some of their cases are missing bgCtx.beginPath(); but I did include it, andbgCtx.width = bgCtx.width; doesn't work, either, am I missing something or anything wrong?
Any suggestion would be appreciated :)
You're creating a new canvas element on every draw().
Fiddle
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
I have a Raphael javascript program, where I have several (dozens, hundreds, whatever) circles written to the page, like so:
evo_sprite = paper.circle(evo.x, evo.y, this.evo_size);
Each circle has a limited amount of time I want it displayed, after which I want it destroyed so it doesn't slow stuff down.
When I do:
evo_sprite.hide();
I have no problems, but I know the sprite is still there, and thus still taking up memory.
So I tried:
evo_sprite.remove();
And got what APPEARED to be the same result (the circle is no longer displayed).
The only problem is that after some amount of time(seems random), my program freezes and I get the error message:
a1.paper is undefined
[Break On This Error] Raphael=(function(){var a=/[, ]+/,aO=/...eturn d;};an.el=ax[aY];return an;})();
Does this make sense to anybody? Am I calling remove incorrectly? How am I causing Raphael's code (on line 7 of the min file) to break just by calling remove on a circle?
It's difficult to know without seeing your code, but it looks like it is the Raphael canvas that isn't being found (I presume that's what a1.paper is).
Are you instantiating your Raphael canvas on document.onload (or $(document).ready with jQuery)? Make sure there aren't any closures in your code that make functions trying to operate outside the scope of a1.paper.
Then go right back to basics - try it with just a few circles to begin with, then 50, then 100. Then try it in different browsers and see whether it stops working in all of them. SVG is quite browser intensive, so creating thousands of circles might make some browsers break.
I'm looking for examples of processing.js working in Internet Explorer via ExplorerCanvas or similar.
It can be done! There are some gotchas, however. The page htxt links to is fine, as far as it goes, but please note the following:
1) Both script and canvas elements must have id attributes. The init function uses these attribute id's to associate a given script with a given canvas. I found the simplified init function easier to understand than the official one. You will want to master the official one if you have multiple canvases on one page.
2) If you use internet-style color designations, like #23ff9a, watch out! IE 8 wants all upper case hexadecimal color numbers from Processing.js/canvas. Write #23FF9A! This is what the documentation shows, so it shouldn't be a complete surprise. The error is a sometime thing, which makes it crazy to figure out. Mostly, larger numbers (for lighter colors) with lots of f's seem to be afflicted. White, #ffffff, is OK, but #ff00ff is not. Firefox and Safari are case-insensitive in this regard. The documentation says you can use an alternate hex notation with alpha channel (the CC) that looks like 0xCC006699. This didn't work for me; maybe it's on the to-do list.
3) The .equals() method on strings is missing! Andor Salga, one of the Seneca College crew working on Processing.js, wrote a simple boolean stringsEqual(str1, str2) function you can see here. This will do until the matter is definitively fixed.
4) It's not true that stroke() doesn't work with excanvas.js. It does. However, if your Processing.js code has even one little syntax error (I can't really categorize which kinds, but trying to use .equals() will do it) your routine will probably fail silently in IE8, whereas, in Safari or Firefox, your rectangles may lose their outlines, i.e. stroke() will quit working. IE on Vista, and Safari on the Mac, have both exhibited stronger syntax checking than Safari or Firefox on Vista, which will blow by certain errors and render a defective graphic.
5) Text, invoked using the text() function, renders in Firefox (in an unchangeable font of Firefox's choosing), but, as far as I can tell, not in IE8 or Safari. The Glyph Method is suggested here. The code is in place, but getting the fonts looks like a problem. Inkscape looks pretty impenetrable to me. As far as I can tell, what is needed is a lot like old pen-plotter fonts - a vector path with pen-up and pen-down commands between runs of nodes. Turns out FSF/GNU has some that might be massaged into the right format without too much trouble. I don't know where the format is defined, but it's probably over at W3C somewhere. The approach with real potential for presentable fonts is the IE/VML wing of Cufon. See How does it work? I really want this last link in the chain, but I could use some help.
Processing.js is one whale of a project that deserves our support. It has enormous potential. I would encourage you to pitch in if you are able.
The sparklines example on the processing.js exhibition page uses ExplorerCanvas. It seems like it's just a drop-in solution, no extra coding necessary.
This page describes how to get processing.js + excanvas working together.
It basically involves writing your own onload init method that IE can understand.