Develop Reference

How to make an Infinite Html5 Canvas which can be zoomed and panned?

I was working on a real time whiteboard.
I want to create an Infinite canvas, which can be zoomed using the mouse wheel and panned using drag, using javascript.During the zoom and pan the items drawn on the canvas must also be affected. Is there a was to achieve this without using any external library?

Yes, but it'll take a bit of work. The general idea of what you'll do is the following:
You will need to keep track of the position of the "camera", as well as how close it is to the content - a zoom factor
You will need to attach event listeners to different mouse actions to cause the camera's state to change
When you drag or zoom, you will need to redraw your canvas with the new positions and sizes of all the content. Some math will have to be done to know what the new canvas content is.
There may or may not be certain performance issues you have to address if there's a lot of content on the canvas.
An alternative, possibly quicker approach, but maybe less powerful, would be to not use canvas, and use some CSS magic instead with plain HTML. The basic concept here is that you'll have a 0x0 div as your plane. That div will contain your content, which may include content such as custom SVGs. Each of its children will break out of the div, and will be positioned relative to it. When you drag, you just move the div (through transform: translate()). When you zoom, you just scale the div (through transform: scale()).
Some useful references if taking the second approach:
CSS transform - to move and scale the whiteboard
CSS position - to position content on the whiteboard, and for the general layout
CSS overflow - to crop the whiteboard

The canvas element itself won't be infinite, I guess that's clear enough. What will change when you drag and zoom is the mapping of the real coordinates of your whiteboard elements to the drawing coordinates on the canvas. There's some work to do with detecting the mouse events and doing the calculations for updating the mapping, so there are too many specifics to really put in an answer. But yes of course this is possible without an external library.

Basically canvas could not be set to infinite sized. All you can do is to draw the portion that should be visible in the canvas.
first of all you should store all the points you have drawn to an array.
whenever you pan your canvas , track the offset that you have panned. this offset values can be used to reposition your stored points in your canvas.
eg. suppose you have drawn a line from (50 , 50) to (100 , 100).
let the offsets be {x:0 , y:0}
x , y offsets shows how much x and y distances you have panned in total
then update the points by adding the offsets and redraw
https://github.com/TomHumphries/InfiniteCanvasWhiteboard
here is a simple html5 whiteboard created by Tom Humphries which has infinite zoom and pan.

How to drag and rotate a image in android webview smoothly

I have two images in the canvas. I have to rotate the circles on it's center only by dragging/rotating the finger on respective sides of the canvas. I have tried to move the circles using the touchmove event. But it does not matches the speed of the finger rotation as I have to pass the angle (set to a specific values). How can I move the circles smoothly, by matching the speed of the finger?

Resize the renderer in highcharts through mouse events

I have drawn a renderer in high-charts using the mouse events . I want to resize and drag&drop the drawn renderer,since I couldn't get a way to resize the drawn renderer I have statically created a html div element with jquery and used some plugins from jquery to resize and drag&drop the drawn element and passing the resized and dragged value from the jquery div element to the renderer in high-charts so the the high-charts renderer gets dragged to the exact position where the html div element is dragged by the user. can anyone help to achieve this only through high-charts?? I have used mouse events to draw in high charts but i cannot get resize and draggable options for drawn renderer, Please look to this fiddle to see what I have done..[jsfiddle](click herehttps://jsfiddle.net/vgokul2272/ecqL1nw7/3/). you can notice on drag and drop of the grey box ,a yellow box behind the grey box.grey box is the html div element and yellow box is the renderer in highcharts.

HTML5 canvas and scrolling

I have a canvas element of size 1024x768 where I draw a very large image, let's just say with width >> 1024 and height >> 768. The image can be scrolled with normal scrollbars to be seen entirely.
Users can click onto the canvas to add vertices to a polygon: each time a vertex is added, a line from the new vertex to the mouse cursor is drawn.
Each mouse movement onto the canvas updates the canvas in order to redraw such line from the vertex to the new mouse cursor position.
Being the image VERY large, redrawing is very slow, so I'd like to just redraw the currently visible chunk of image or, even better, the "sub-chunk" that is affected by this line.
The problem is: how do I detect the current topLeft and bottomRight of the visible part of the context according to how much the user scrolled the image? Basically I'd like to add support for a custom viewport, but I can't seem to exploit the scolling information to determine the boundingBox of the chunk to crop from the original image.

I actually have a canvasDiv container, which is the real scrollable element, not the canvas itself.
This means your canvas is the full size and you're using the container div as a sort of a "frame". That's really bad as canvas pixels are quite expensive, especially if you're not even using them (they're out of the viewport).
The best approach here is to set the canvas size to the container size and use the drawImage function to control the scrolling. The original image would be places either on an offscreen canvas or an image element. I can guarantee you a much better performance this way.
You'll lose the scrollbars, that's the downside.

I'm assuming you create the scrollbars by having a larger canvas element contained inside a smaller div.
Instead, you can mimic this setup by:
Having a canvas the size of your container div.
Add 2 input type=range controls to act as vertical & horizontal scrollbars (or grab a jqueryUI scrollbar plugin if you want to be fancy).
Then you can use the clipping version of context.drawImage to draw only the portion of the image specified by the range controls. The clipping version of drawImage looks like this: drawImage(myLargeImage, clipX,clipY,clipWidth,clipHeight, 0,0,canvas.width,canvas.height)

How to keep zoomed image in bounding box

Im using jQuery and jQuery UI to zoom an image.
There is a container div with a fixed size and then an image that is much larger that this that is draggable within that container.
The slider that is below controls the zoom level of the image, this works fine.
My issue is that when zooming the image back down in size, if it has been dragged close to an edge of the bounding container, it should snap to that edge and zoom from the remaining edges.
I cannot get it to work though.
The image passes the edge and continues to be scaled down.
You can see the behaviour by zooming the image, moving the top close to the edge of the container and then zooming back down.
Any help would be appreciated, code here -- http://jsbin.com/egivat/5/edit

Any Animation could be done over a fixed point
Check this link
Animate rotation on "CSS3"
The answer given by codeMonkey might be useful to u
All the best !!