Как в js динамически рисовать предметы?
Логикой. Имеете две точки, стартовая и конечная, пока они пустые. При первом клике делаете проверку, если стартовой точки нет, то этот клик и будет стартовой точкой, значит записываем координаты клика в стартовую точку. В этот момент должно работать событие мыши mousemove, которое делает проверку, есть ли стартовая точка и нет конечной, тогда рисуем прямоугольник от стартовой точки до точки координат мыши. При повторном клике опять делается проверка, если стартовая точка есть а конечной нет, то записываем точку мыши в конечную. В этот момент условие в mousemove больше не работает, т.к. есть конечная точка, прямоугольник закрыт. Можно его нарисовать окончательно.
У fillRect конечная точка описывается шириной и высотой, поэтому нужно ее высчитывать вот так:width = xEnd - xStart;
height = yEnd - yStart;
Ну тут довольно все просто, если умеешь рисовать квадрат и отслеживать действия мыши (mousedown, mouseup, mousemove). При нажатии кнопки мыши записываешь координаты курсора, это и есть стартовая точка. Далее при движении мыши ты тоже получаешь координаты курсора, это и есть точка, куда рисовать. Остается только нарисовать. Чтоб это было динамически, придется рисовать на каждом кадре, очистил - нарисовал, очистил - нарисовал и тд. 
jsfiddle.net/profesor08/2rw8c7qglet canvas = document.createElement("canvas")
let ctx = canvas.getContext("2d")

document.body.appendChild(canvas);

let x1 = 0, y1 = 0, x2 = 0, y2 = 0;
let canDrawSelection = false;

canvas.addEventListener("mousedown", function(e) {
	canDrawSelection = true;
	x1 = e.clientX;
	y1 = e.clientY;
	x2 = e.clientX;
	y2 = e.clientY;
});

canvas.addEventListener("mouseup", function(e) {
	canDrawSelection = false;
});

canvas.addEventListener("mousemove", function(e) {
	x2 = e.clientX;
	y2 = e.clientY;
});

function drawSelection() {
	if (canDrawSelection === true) {
		ctx.beginPath();
		ctx.lineWidth="2";
		ctx.strokeStyle="white";
		ctx.rect(x1, y1, x2 - x1, y2 - y1);
		ctx.stroke();
	}
}

function render() {
	ctx.canvas.width = window.innerWidth;
	ctx.canvas.height = window.innerHeight;
	ctx.fillStyle = "#2B2E35";
	ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  
	drawSelection();
}

function animate() {
	requestAnimationFrame(animate);
	render();
}

animate();