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!

Javascript stretch image according to a map?

I'm trying to figure out if it is possible to stretch in image in Javascript so different parts of the image expand more quickly than others. I was thinking along the lines of an black/white map where black does not stretch at all, white stretches the most and the shades of grey in between stretch proportionately. Is this at all possible? I;m hoping to make a picture look as if its losing or gaining weight.
Thanks!

You could use the HTML5 canvas feature along Java-script to do image manipulation.
Altogh it will be processor intensive, mainly if you want to do animation, you can do it.
Some tutorial for the canvas element of HTML5 with Java-script, probably you are interested more on the drawImage(image,x,y) method.
http://www.w3schools.com/html/html5_canvas.asp
And references
http://www.w3schools.com/tags/ref_canvas.asp
You could then get draw the parts you want scaled, but giving it near non noticeable artifacts effects like you want is really difficult.

Drawing interactively onto a <div>

I am building a web application in which the user would be able to draw zones (polygons) onto a video. A solution I already implemented was to put a <div> on top of the video player, catching the mouse clicks.
What I'm willing to do right now, is being able to draw on that <div> with the mouse:
Click on the block to draw a point
A button, Draw zone, which would fill a polygon with the existing points
A button, Delete canvas, which would reset the block
I am looking for directions about which library to use. Already heard about:
Raphael (raphaeljs.com/#demo)
jsDraw2D (jsdraw2d.jsfiction.com/demo/linepolygon.htm)
Problem
Raphael looks monstruous but kinda overkill for what I want to do. And on the contrary, jsDraw2D seems to work just fine from what I tested (only drawed manually though).
I have several constraints such as:
The user is drawing the points with the mouse (by clicking)
The user is drawing on a <div> with opacity on (the filled polygon should be transparent too)
I need to store the points' coordinates (or of the polygon at least)
Question
What should I use ? Should I stick to Raphael even though it's a bit difficult to implement (I've basically no background in JavaScript) ? Or do you know of a JavaScript library which could do what jsDraw2D does but in better ?
Thanks,

You should use SVG because they are obviously more interactive and easy to implement. If you've ever used Khanacademy then probably you'll come to know that they use SVG in their scratchpad.
Moreover, SVGs are also w3c recommended like canvas.

If you are able to go for HTML5 Canvas could be a good choice.

Create something like this with CSS3?

http://raphaeljs.com/polar-clock.html
I'd like to create this without using SVC or Canvas. Can anyone point me in the direction of examples doing something similar with css?
Thanks!

Well, SVG certainly seems to be the correct solution to this (or canvas, but I would prefer SVG). And the Raphael script will even work in old versions of IE as it switches to VML in IE6/7/8, so if you're trying to avoid SVG/Canvas because of that then you don't need to worry.
But you're asking how to do it without them, so I'll see what I can do...
There are a number of people who have demonstrated drawing some quite complex shapes using pure CSS. See http://css-tricks.com/examples/ShapesOfCSS/ for example.
With pure CSS/HTML, the only realistic way to draw curves is using the border-radius style. A circle as per the example in the question could be achieved using a square element with border-radius, and a thick border.
Drawing concentric circles as per the question would involve numerous elements layered on top of each other, each styled similarly, but at different sizes.
Now the tricky bit. To turn them from circles into arcs is going to be harder. The only sensible way I can think of to do it would be to layer some more elements on top of the circles coloured the same as the background, to obscure part of the circle. We would need to use CSS transform to rotate them so that the angle of the cut-off was correct.
So it could be done.
Animating it (certainly as nicely as in the example) would be another order of magnitude more difficult, and I wouldn't want to even start thinking about it. Just give me the SVN any day.