Develop Reference

Pan and zoom on an "infinite" graph paper background in js

For a project I'm working on I would like to have a background that I can pan around indefinitely, zoom in and out of and position and move around elements on that background.
The closest example I can think of is this: https://www.desmos.com/calculator. Additionally I will position different elements on top of that grid and move them around. For that I plan to use React and that isn't going to be much of a problem. The main issue I have is how to build the said background so that it can check all my requirements. I'm able to draw a grid but for moving around and zooming in and out (such that all the elements "on top" of the grid also scale up and down) is proving challenging for me. I would also like it if it can be done without the use of any specific drawing libraries and just pure JS but i'm open to suggestions. Any help will be appreciated.
P.S. I'm looking for general guidelines to how I can achieve my goal. For example different technologies or methods and not concrete solutions. I apologise if the question is too vague or badly formatted as it's the first time I'm asking here.

Desmos uses canvas to draw the "infinite" grid. You can achieve this using something like three.js or konva.js. One drawback of canvas is that you cannot place HTML elements on the grid.
Edit: Using three JS, you can use the gridHelper function and set the rotation about the x-axis by Pi. This should give you a "2d" grid. However, I found gsap and the Draggable plugin were better suited for this.
https://codepen.io/osiv/pen/gOwxmvO
This is definitely a work-in-progress, but it gives the idea of what I am working for. Zooming is basically preventing the default wheel behavior and changing the background image size:
handleWheelEvent(e) {
e.preventDefault();
let el = document.getElementById("grid-container");
let currengBackgroundSize = this.getPixelStringAsInteger(getComputedStyle(el).backgroundSize);
if(e.deltaY < 0) {
// decrease size
} else {
// increase size
}
}

jQuery circular animation based on right and left controls and friction

This is a rather biggish question that i am just hoping to find some direction with.. I dont expect anyone to do this entire thing... But to rather learn how to go about projects like this. Here we go:
I am trying to achieve an this animation:
Basically whats happening here is, I need to have a semi oval shape and a ball constrained to it and when you press the left and right arrows it needs to slowly to quickly move left to right and based on the speed of the button clicks it needs to either complete the ramp or stop and drop. Imagine a skateboard and a ramp.
I know the basics of jQuery but the circular animation and friction effect is where i get lost..
Any Help/Direction/Advice Greatly Appreciated. Thank you.

I'm trying an answer for the animation part:
If you are ok with HTML5 then for the animations there are two ways to go:
Either use HTML5 Canvas, which really works well for providing dynamic content. Its basically a canvas on which you can freely draw. It's pixel based and has a good performance and, if done right it does not decline very much when drawing many elements). You should also double-buffer it in order to avoid any flickering when drawing.
Or use HTML5 Inline Svg. It's vector based, so resolution-independent and has good support for animating svg elements. In contrast to HTML5 Canvas the elements of the svg are DOM-Nodes, so you see the graphic elements directly in your DOM-Tree.
In order to sum up the trade-offs:
HTML5 Canvas
-Pixel-based
-Good Performance
-Free drawing
HTML5 Inline Svg
-Vector-based
-Animations built-in
-Elements are DOM-Nodes
For much more information, see
http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

Spinning wheel or 360 degree rotation wheel

I am looking for some jquery plugin or any code examples for multiple spinning wheels or 360 degree rotation wheels. Attached is the demo image for which, I am looking for the solution, where all the wheel can be rotate and This is basically develop birthdate selection somewhat like desktop and mobile application...But I need for my web application. I am using PHP & Apache web server.
Thanks in advance for any idea or sameple code or similer solution to moving forward
-Himanshu

I don't know of any ready made solutions, but I can point you in two directions you can go:
You can make an image for each of the 3 different wheels with the correct sizes and next use css3 transformations to rotate the specific wheels with javascript ( https://developer.mozilla.org/en/CSS/transform#rotate )
The other option is to look into the html5 canvas tag and draw the wheels onto it by hand. Here is a tutorial which covers making a roulette game on a canvas tag, which is quite different from your requirements, but does describe the necessary techniques. http://www.switchonthecode.com/tutorials/creating-a-roulette-wheel-using-html5-canvas

Yes HTML5 canvas rotate() is the way to go with this. My site http://www.dougtesting.net has a winning wheel that uses canvas rotation, but only for one wheel image. The code is fully commented so you may find it a useful starting point.
For your project you would probably need multiple images that are rendered to the canvas and rotated to the desired angles. Also you will probably need to look in to a mouseDown, mouseMove, and mouseUp code to allow the user to drag the wheels to the desired locations, with the code being able to tell you the values pointed at (something the code in my winning wheel can also do).

I am not aware of a jQuery plugin that does exactly what you ask. In terms of browser compatibility, I recommend you to take a look at the excellent RaphaelJS JavaScript library. It allows you to draw and rotate a wheel using vector graphics. Best of all, this library is IE6+ compatible and works in most if not all modern webbrowsers, including tablets and mobile phones.
To ease the creation of the necessary vector graphics, you can draw the wheel in a vector image editor of your choice (e.g. Illustrator, Inkscape, etc..) and save the vector image as SVG file. A very convenient online companion tool called ReadySetRaphael takes an SVG file as input and produces the necessary JavaScript to draw the graphics automatically.
If you have the path of the vector graphic as an object in JavaScript, it is easy to rotate it with the Element.rotate() method.

Although I am not sure if a plugin exists for this purpose;In my current project we have made a context menu using the canvas api which is not that different from your requirement, if not a bit more complex. Therefore, I highly recommend using the HTML5 Canvas api to do this, if you are not restricted from it. You can use a few ideas from the interactive flower tutorial.
http://www.html5canvastutorials.com/labs/html5-canvas-interactive-flower/
This should help too if you're interested in bringing jQuery into play.
http://www.elated.com/res/File/articles/development/javascript/snazzy-animated-pie-chart-html5-jquery/

How to add and remove (multiple) image from canvas.?

I am new to canvas (HTML5) i have to design a paint application on canvas. There is a feature like dynamic addition of the selected image at canvas (on mouse-movements) and functionality to delete and drag that added image (Same for Text addition). Now my Question is how can we delete the images from the canvas (Note :There are no fixed no. of images added to the canvas.) Can you please suggest me the approach ??

An HTML5 Canvas is much like a real-world canvas. When you draw to the canvas the ink changes the canvas, blending with the other contents already there and forever changing them.
Ask Monet "How do you add a new person to your painting?" and he might say "you just paint them where you want them!" Similarly, you use drawImage() to 'paint' an image to your Canvas.
However, if you ask Monet "How do you remove a person from a painting?" and he would likely look at you funny and then respond "Quoi? You would have to either make a new painting, or else paint over top of the person!" Similarly, if you want to "remove" something from your canvas you either have to start over (clear the canvas and draw everything except that thing) or re-paint what was 'behind' your image on top of it.
Here is an example I made that shows one way that you can 'save' part of a canvas (by drawing it to another canvas) and then later drawing it back over something to 'erase' it.
However, I generally advise you not to use an HTML5 Canvas unless you know why you need it. You mention adding and removing items, and also detecting mouse movements. Using a retained-mode drawing system—like HTML or SVG—means that you actually add or remove or change items in an object representation, and it is up to someone else (the browser) to figure out how to best redraw them.
You may be best served by letting the "paint" portions of the user input be done on one or more canvases, and then compositing these canvases with other items (such as <div>s with text, or <img> for pictures, or vector-based SVG artwork).
You can make your own retained-mode system on type of canvas, or you can use someone else's library that does this. But instead I'd suggest that you consider whether this is the best and easiest way to accomplish your goals.

Freeform drawing over an image using <canvas> and javascript

I have been trying to find a good resource to point me in the correct direction and I'd really like someone to help me in this regard.
I'm developing an app that uses phonegap, js and html5. One component of this app is to have an image that can be overlayed with freeform scribbles.
I'm not sure if its the canvas object I should be using and if so how do I go about implementing a drawing solution.

You create a and position it absolute over image.
can have transparent pixels (alpha=1.0) and those pixels will display the underlying image.
Then you flip pixels accordingly your scribbling to black etc. You need to listen to touch events, transform their coordinates to coordinates and then use canvas.getContext() draw operation to manipulate pixels hitting in those coordinates.
If you need further assistance please ask individual questions for each part as a complete solution would be longish source code and outside the scope of simply answering the questions.