A series of demos that shows how to display an image on an html5 canvas, pan around, zoom in and out
JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo1
demo10-1
demo10
demo11
demo12
demo2
demo3
demo4
demo5
demo6
demo7
demo8
demo9
img
.gitattributes
.gitignore
README.md

README.md

Panning-Zooming-Canvas-Demos

A series of demos that shows how to display an image on a html5 canvas, pan around, zoom in and out

Demo 1

Introduction to HTML5 canvas. How to initialize a canvas object and draw a colored rectangle.

View Demo 1

Demo 2

How to intialize an image object and draw it inside of the canvas

View Demo 3

Demo 3

How to calculate the scaling of an image given a predefined width and draw it to the canvas

View Demo 3

Demo 4

Initialize a bunch of canvas events: clicking (mousedown), dragging (mousemove), letting go (mouseup) and write a simple log of the events.

View Demo 4

Demo 5

Grab the coordinates of mousedown, initialize the drag event and update the distanced moved from dragging. Update the canvas image based on distanced moved/dragged.

View Demo 5

Demo 6

Keep track of how far the image moved based on previous drag events instead of resetting the image position to 0,0 every time.

View Demo 6

Demo 7

Incorporate jQuery to quickly handle/access button events for new Zoom in and Zoom out options. Use a basic 2x zoom scale and multiply the size by 2 when zooming in. Divide by 2 when zooming out. Redraw the canvas with new sizes for each zoomin/zoomout event.

View Demo 7

Demo 8

All zoom in/zoom out events were initially being draw to 0,0 for the upper left coordinate. Zoom in/out to the center of image instead of the top left.

View Demo 8

Demo 9

Since we're calculating the center frequently, create a method that can be used throughout instead of calculating it every event. Also set the initial image display to be centered.

View Demo 9

Demo 10

Detect pinch gesture insanely easily. Draw the points to the canvas. Must be on mobile device.

View Demo 10

Demo 11

Detect pinch gesture and calculate a ratio based on how much we've moved then scale an image up/down.

View Demo 11

Demo 12

Zoom in and out on mouse wheel point (with default panning functionality)

View Demo 12