JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<div id="heat">
  <canvas id="viewport" width="408" height="464"></canvas>
</div>
<div id="test" style="top: 175px; left: 155px; width: 30px; height: 25px; background-color: black; position: absolute"></div>

JavaScript

var canvas = document.getElementById('viewport');
var context = canvas.getContext('2d');
var divToMove = document.getElementById("test");
var imageObj = new Image();
var zoomE;

imageObj.onload = function() {
	context.drawImage(imageObj, 0, 0, 408, 464);
};
imageObj.src =  "http://content.worldcarfans.co/2008/6/medium/9080606.002.1M.jpg";

$(document).ready(function() {
	zoomE = d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom);
	d3.select("#heat").call(zoomE)
	.on("mousedown.zoom", null)
	.on("touchstart.zoom", null)
	.on("touchmove.zoom", null)
	.on("touchend.zoom", null);
});

function zoom() {
	var e = d3.event;
	var	tx = Math.min(0, Math.max(e.translate[0], 408 - 408 * e.scale));
	var	ty = Math.min(0, Math.max(e.translate[1], 464 - 464 * e.scale));
	context.save();
	context.clearRect(0, 0, 408, 464);
	zoomE.translate([tx, ty]);
	context.translate(tx, ty);
	context.scale(d3.event.scale, d3.event.scale);
	context.drawImage(imageObj, 0, 0, 408, 464);
	context.restore();
}