JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<body>
  <canvas height="480" width="900" style="border:2px solid" id="mapcanvas">

  </canvas>
</body>

JavaScript

var canvas = document.getElementById('mapcanvas');
var ctx = canvas.getContext('2d');
trackTransforms(ctx);
var img = new Image;
var rects = [];

$(function() {
  var imgUrl = 'http://www.planwallpaper.com/static/images/map_usa_3SxNEbV.jpg';
  if (imgUrl != '') {
    img.onload = function() {
      drawMap(ctx, this);
    }
    img.src = imgUrl;
  }

  var lastX = canvas.width / 2,
    lastY = canvas.height / 2;
  var dragStart, dragged;
  var client_click = 0;
  canvas.addEventListener('mousedown', function(evt) {
    document.body.style.mozUserSelect = document.body.style.webkitUserSelect = document.body.style.userSelect = 'none';
    lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
    lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
    dragStart = ctx.transformedPoint(lastX, lastY);
    dragged = false;
    client_click++;
    var clicked = "";

    for (var i = 0; i < rects.length; i++) {

      if (rects[i].isPointInside(lastX, lastY)) {
        clicked += rects[i].id + " "
      }
    }
    if (clicked.length > 0) {
      alert("Clicked Area: " + clicked);
    }
  }, false);
  canvas.addEventListener('mousemove', function(evt) {
    client_click = 0;
    lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
    lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
    dragged = true;
    if (dragStart) {
      var pt = ctx.transformedPoint(lastX, lastY);
      ctx.translate(pt.x - dragStart.x, pt.y - dragStart.y);
      rects = [];
      drawMap(ctx, img);
    }

  }, false);
  canvas.addEventListener('mouseup', function(evt) {
    dragStart = null;
    if (!dragged) {
      if (client_click > 1) {
        zoom(evt.shiftKey ? -1 : 1);
        client_click = 0;
      }
    }
  }, false);

  var scaleFactor = 1.1;

  var zoom = function(clicks) {
    var pt = ctx.transformedPoint(lastX, lastY);
    ctx.translate(pt.x, pt.y);
    var factor = Math.pow(scaleFactor, clicks);
    ctx.scale(factor, factor);
    ctx.translate(-pt.x, -pt.y);
   ...