Strongly inspired by img-touch-canvas.

It's a simple library for pinch to zoom an image based on a canvas element for smooth rendering. The library use a Impetus for adding a momentus on move the image zoomed. Impetus is not required but recommended.

• Momentum for move the image zoomed
• Pintch to zoom and center between the touches
• Double tap to zoom
• Stopping the event when the element is inactive

This plugin is written in Vanilla JS.

• iOS Safari (8.x, 9.x)
• Android Google Chrome
• Cordova App
• Google Chrome

Open this link into mobile device

$ bower install --save pinch-zoom-canvas

$ npm install --save pinch-zoom-canvas

<script src="pinch-zoom-canvas.js"></script>

• canvas mandatory. It is a DOM element where the image is rendered.
• path mandatory. It is a path url of image.
• doubletap optional (default true). Double tap for zooming.
• momentum optional (defalut false). Set a momentum when the image is dragged. This parameter require Impetus library.
• maxZoom optional (default 2). It is the zoom max.
• onZoomEnd optional (default null). It is a callback function called when the pinch ended.
• onZoom optional (default null). It is a callback function called when zooming.
• threshold optional (default 40). Area (in px) of the screen to release touch events.

Stop the render canvas.

Resume the render canvas.

Update the canvas offset.

Return a boolean value for the image state of zoomed.

Stop all events and render canvas.

<canvas id="mycanvas" style="width: 100%; height: 100%"></canvas>

var pinchZoom = new PinchZoomCanvas({
	canvas: document.getElementById('mycanvas'),
	path: "your image url",
	momentum: true,
	zoomMax: 2,
	doubletap: true,
	onZoomEnd: function (zoom, zoomed) {
		console.log("---> is zoomed: %s", zoomed);
		console.log("---> zoom end at %s", zoom);
	},
	onZoom: function (zoom) {
		console.log("---> zoom is %s", zoom);
	}
	});

See the LICENSE file.