We Keep Coding

Fabric.js / canvas infinite background grid like miro

Cheers community,
finally, I got my first question here on StackOverflow and it's all about "infinite grid" with fabric.js - if you have any feedback on my question pls hit me up!
The Project:
I try to develop a little drawing tool with fabric.js and wondering how I can implement an infinite background grid like miro has.
My requirements or personal goals to this project/question:
Zooming in and out - resize the grid like miro
Panning also affects the background grid like miro
Dynamic Canvas size -> if I resize the browser, the grid is also fitted canvas with /height
Found a lot of useful links but without zooming, panning, resizing or with a bad performance. If you have any "best practice" hints, links or ideas pls share with me :-)
Thx for your time and help!

Canvas implementation of Circle Packing is jittery when zooming

I'm trying to learn canvas (to improve a visualization I made a few weeks ago in D3.js which is very slow due to many DOM elements: http://nbremer.github.io/occupations/). I managed to make a canvas based circle packing in which you can zoom, but it's rather jittery while zooming: http://bl.ocks.org/nbremer/667e4df76848e72f250b
Does anybody have any suggestions on how I can improve this? I tried d3.timer and am now using requestAnimationFrame, but that doesn't seem to make a difference. (Once I manage to get this working, I still want to add the small bar charts that are packed in each white circle as in the original example)
Thank you!

Spinning 3D WebGL Shapes

I am supposed to draw a transparent sphere which can be rotated by mouse dragging. I tried to start learning the basis of WebGl but I have not found any appropriate sources. Can anybody help me how to start learning WebGl and also how to draw 3D shapes such as Sphere or tetrahedron and how I can spin it in all dimensions ?
Thanks.

I'd recommend you use three.js but if you really want to learn WebGL start with http://webglfundamentals.org ;)

I would suggest using a framework like three.js that abstracts webGL's functionality, it makes doing things like this a breeze. Check out threejs.org and http://learningthreejs.com/

How can I render to framebuffer back sides of the cube? (Invisible sides from my point of view?)

I am trying to develop volume rendering in WebGL with Three.js library. I know how to do that in pure WebGL, but i am not able to find any way in Three.js.
So..the problem...
1) How can I draw the back face of boundingbox (i have a cube) to framebuffer? I need draw only invisible sides of the cube.
2) How can I draw front face of boundingbox? (Only frontface)
Thanks a lot :-) I really dont know how to do that in Three.js...is it possible? If it is not possible, i will do it in pure WebGL..but i dont want to mix WebGL and Three.js library..i would like to have clean solution..
Thank your very much :-)

You can select front-face or back-face culling like so:
renderer.setFaceCulling( THREE.CullFaceFront );
renderer.setFaceCulling( THREE.CullFaceBack );
three.js r.55

Solution is:
Set to renderer this:
renderer.setFaceCulling("front");
OR
renderer.setFaceCulling("back");
Thanks for help to WestLangley.

how to make a fog effect or blur effect in canvas with js?

I'm using javascript and THREE.js 3d engine,
and I want to do a fog effect,
here's an example http://mrdoob.github.com/three.js/examples/webgl_geometry_terrain_fog.html
but it only support WebGL,
so is there any way to simulate fog effect, or a blur effect with javascript and canvas?
thanks alot.

Three.js is WebGL. The example you're looking at is created by the same person who made three.js.
Three.js supports fog already with scene.fog.
https://github.com/mrdoob/three.js/wiki/API-Reference#wiki-THREE.Fog
below is for people that searched for fog/blur in Canvas looking for 2D
There are a bunch of places that have implemented various blur effects. The pixastic library has a lot of such effects implemented.
Fog is something different, though. There isn't a universal definition and it really depends on what you're looking for. One way would be to set the globalAlpha of the canvas to something like 0.3 and then draw perlin noise on the locations that you want "fog" to appear. Note that the color gradient of the noise that you most likely want is transparent to dark gray.