<p>This script loads jquery and the drawtools library from <a href="https://github.com/bronkula/drawtoolsjs/blob/master/draw.js">GitHub</a></p>
<p>Click and drag to test</p>


<canvas width="400" height="400"></canvas>
<div class="temp-change"></div>
canvas {
  border:1px solid black;
}
var cvs = $("canvas");
var ctx = cvs[0].getContext("2d");
var cvsW = cvs.width();
var cvsH = cvs.height();
var isDragging = false;
var originPos = false;

cvs
  .on("mousedown touchstart",function(e){
  
  // set the origin position
  originPos = getEventXY(e);
  // start dragging
  isDragging=true;
  // draw an origin circle
  drawCircle(ctx,originPos.x,originPos.y,10,{fillStyle:"#66f"})
})
  .on("mousemove touchmove",function(e){
  // cancel this function if not dragging
  if(!isDragging) return;
  var pos = getEventXY(e);
  // clear out the previous drawings
  ctx.clearRect(0,0,cvsW,cvsH);
  
  // During the next few lines, if you switch the originPos with the pos values, you can get some drastically different results. Right now, this is keeping the position circle in a vertical line by using the originPos x.
  
  // draw the line in the back
  drawSegment(ctx,originPos.x,originPos.y,originPos.x,pos.y,{lineWidth:2,strokeStyle:"gray"})
  // then draw the origin circle
  drawCircle(ctx,originPos.x,originPos.y,15,{fillStyle:"#66f"})
  // then draw the position circle
  drawCircle(ctx,originPos.x,pos.y,10,{fillStyle:"#6f6"})
  drawCircle(ctx,originPos.x,pos.y,20,{strokeStyle:"#6f6",lineWidth:2})
  
  // Draw the offset text
  // Round it, because on hidpi screens the number is a float.
  drawText(ctx,Math.round(originPos.y-pos.y),originPos.x-30,pos.y,{fillStyle:"gray",font:"16px verdana",textAlign:"right",textBaseline:"middle"})
})
  .on("mouseup touchend",function(e){
  var pos = getEventXY(e);
  // Write the offset amount
  $(".temp-change").html(Math.round(originPos.y-pos.y)+" Change to temperature")
  ctx.clearRect(0,0,cvsW,cvsH);
  isDragging = false;
  originPos = false;
})
Rerun