Area of the Intersection of Two Rectangles - with drawing

This is my response to the reddit dailyprogrammer 12/22/16 intermediate challenge.

by Tom Resing

HTML

<H1>
Area of the Intersection of Two Rectangles
</H1>
<input type="submit" id="byBtn" value="Input 1" onclick="input1()" /> 0,0 2,2  1,1 3,3
<br/>
<input type="submit" id="byBtn" value="Input 2" onclick="input2()" /> -3.5,4 1,1  1,3.5 -2.5,-1
<br/>
<input type="submit" id="byBtn" value="Input 3" onclick="input3()" /> -4,4 -0.5,2  0.5,1 3.5,3
<br/>
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3;">
  Your browser does not support the HTML5 canvas tag.</canvas>
<div id="area"></div>
<div>
  <BR/> This is my response to the <a href="https://www.reddit.com/r/dailyprogrammer/comments/5jpt8v/20161222_challenge_296_intermediate_intersecting/">reddit dailyprogrammer 12/22/16 intermediate challenge.</a>
</div>

CSS

H1 {
  font-family: "Helvetica", "Arial", sans-serif;
}

div {
  font-family: "Helvetica", "Arial", sans-serif;
}

JavaScript

var _input11 = "0,0 2,2";
var _input12 = "1,1 3,3";
var _input21 = "-3.5,4 1,1";
var _input22 = "1,3.5 -2.5,-1";
var _input31 = "-4,4 -0.5,2";
var _input32 = "0.5,1 3.5,3";

function parse(rectangle) {
  var coordarray = rectangle.split(" ");
  return [coordarray[0].split(","), coordarray[1].split(",")];
}
function clear() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.clearRect(0, 0, c.width, c.height);
  ctx.beginPath()
}
function draw(x, y, a, b) {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.rect(80 - x * 10, 80 - y * 10, 80 - a * 10, 80 - b * 10);
  ctx.stroke();
}

function overlap(rect1, rect2) {
  var corners = parse(rect1).concat(parse(rect2));
  clear();
  draw(corners[0][0], corners[0][1], corners[1][0], corners[1][1]);
  draw(corners[2][0], corners[2][1], corners[3][0], corners[3][1]);
  var minX = Math.min(Math.max(corners[0][0], corners[1][0]),
    Math.min(corners[2][0], corners[3][0]));
  var minY = Math.max(Math.min(corners[0][1], corners[1][1]),
    Math.min(corners[2][1], corners[3][1]));
  var maxX = Math.min(Math.max(corners[0][0], corners[1][0]),
    Math.max(corners[2][0], corners[3][0]));
  var maxY = Math.min(Math.max(corners[0][1], corners[1][1]),
    Math.max(corners[2][1], corners[3][1]));
  return (maxX - minX) * (maxY - minY);
}

function input1() {
  document.getElementById("area").innerHTML += "<br/>Area #1: " +
    overlap(_input11, _input12);
}
function input2() {
  document.getElementById("area").innerHTML += "<br/>Area #2: " +
    overlap(_input21, _input22);
}
function input3() {
  document.getElementById("area").innerHTML += "<br/>Area #3: " +
    overlap(_input31, _input32);
}