var c = document.getElementById("myCanvas");
    c.width = c.scrollWidth;
    c.height = c.scrollHeight;
    var WIDTH = c.width;
    var HEIGHT = c.height;
    var ctx = c.getContext("2d");
    var dragging = false;
    var dragStartLocation;
    var snapshot;
    ctx.lineCap = 'round';
    ctx.strokeStyle = 'blue';
    var fillBox = document.getElementById("fillBox");
    fillBox.checked = false;
    var canvasOffset = c.getBoundingClientRect();
    var offsetX = canvasOffset.left;
    var offsetY = canvasOffset.top;
    var startX,
        startY;

    var rectangles = [];
    var selected = null;


    var bSlantLine = document.getElementById('slant-line');
    var bCircle = document.getElementById('circle');
    var bRemoveEvent = document.getElementById('removeEventListeners');

    //ignore the addEvents namings, i had to make do with this
    bCircle.addEventListener('click', () => {
        c.addEventListener('mousedown', dragStart);
        c.addEventListener('mousedown', drag);
        c.addEventListener('mouseup', dragStop);
    });

    //ignore the addEvents namings, i had to make do with this
    bSlantLine.addEventListener('click', () => {
        c.addEventListener('mousedown', holdIt);
        c.addEventListener('mousedown', moveIt);
        c.addEventListener('mouseup', stopIt);
    });
    bRemoveEvent.addEventListener('click', removeAdds);
    function removeAdds() {
        c.removeEventListener('mousedown', dragStart);
        c.removeEventListener('mousedown', drag);
        c.removeEventListener('mouseup', dragStop);
    }
    function getCanvasCoordinates(event) {
        var x = event.clientX - offsetX,
            y = event.clientY - offsetY;

        return { x: x, y: y };
    }
    function contains(px, py, px1, py1, positionX, positionY) {
        if((px <= positionX) && (px1 >= positionX) && (py <= positionY) && (py1 >= positionY))
        {return true;}
        else{return false;}
  }
    function drawRecObj() {
        var j = rectangles.length;
        for (var i = 0; i < rectangles.length; i++) {
            ctx.rect(rectangles[j - 1].x, rectangles[j - 1].y, rectangles[j - 1].w, rectangles[j - 1].h);
            console.log('no:' + i);
            ctx.stroke();
        }
    }
    function drawRectangle(position) {
        var width = (position.x - dragStartLocation.x);
        var height = (position.y - dragStartLocation.y);
        rectangles.push({
            x: dragStartLocation.x, y: dragStartLocation.y, w: width, h: height
        });
        ctx.beginPath();
        drawRecObj();
    }
    function dragStart(event) {
        dragging = true;
        dragStartLocation = getCanvasCoordinates(event);
        takeSnapshot();
        c.style.cursor = "crosshair";

    }
    function drag(event) {
        var position;
        if (dragging === true) {
            restoreSnapshot();
            position = getCanvasCoordinates(event);
        }
    }
    function dragStop(event) {
        dragging = false;
        restoreSnapshot();
        var position = getCanvasCoordinates(event);
        drawRectangle(position);
        c.style.cursor = "default";
    }
    function holdIt(e) {
        var mouse = getCanvasCoordinates(e);
        var mx = mouse.x;
        var my = mouse.y;
        var l = rectangles.length;
        for (var i = l - 1; i >= 0; i--) {
            var rx = rectangles[i].x;
            var ry = rectangles[i].y;
            var rw = rectangles[i].w + rectangles[i].x;
            var rh = rectangles[i].h + rectangles[i].y;
            if (contains(rx, ry, rw, rh, mx, my)) {
                var myRectangles = rectangles[i];
                startX = mx - myRectangles.x;
                startY = my - myRectangles.y;
                selected = myRectangles;
            }
        }
        c.style.cursor = "pointer";
    }
    function moveIt(e) {
        if (selected != null) {
            var mouse = getCanvasCoordinates(e);
            var mx = mouse.x;
            var my = mouse.y;
            selected.x = mouse.x - startX;
            selected.y = mouse.y - startX;
            //use valid that was in SA
            drawRecObj();
        }
    }
    function stopIt(e) {
        selected = null;
    }
    <canvas id='myCanvas'>Your browser doesn't support canvas</canvas>