I have been slaving over all of this for about a year and I think it’s time to share some basic information about it.
I’ve put together some demos. It starts off dead simple: how to initialize a canvas and draw a rectangle.
Currently, I’m on demo 9 which shows how to zoom in to the center of an image.
You can check out the code on Github:
You can also browse all of the demos individually:
Introduction to HTML5 canvas. How to initialize a canvas object and draw a colored rectangle.
How to intialize an image object and draw it inside of the canvas
How to calculate the scaling of an image given a predefined width and draw it to the canvas
Initialize a bunch of canvas events: clicking (mousedown), dragging (mousemove), letting go (mouseup) and write a simple log of the events.
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.
Keep track of how far the image moved based on previous drag events instead of resetting the image position to 0,0 every time.
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.
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.
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.
The source of the image that I use for the demos comes from: