const xMax = 400;
const yMax = 400;
const initialValues = {x: 200, y: 205};
const verticalLineLength = 150;
const horisontalLineLength = 100;
const LINE_WIDTH = 16;
const range = 22 + LINE_WIDTH / 2;

const STEP = 25;
let pos = {x : 0, y : 0};

window.addEventListener('keydown', (event) => {
  const keyName = event.key;
  switch(keyName){
	case 'ArrowUp' : changePath('y', -STEP); break;
	case 'ArrowDown' : changePath('y', STEP); break;
	case 'ArrowLeft' : changePath('x', -STEP); break;
	case 'ArrowRight' : changePath('x', STEP); break;
  }
});

function changePath(attr, val){
	pos[attr] += val;
	drowCanvas();
}

function drowHorisontalLine(ctx){
	/** Рисуем горизонтальную линию линию */
	let xFrom = initialValues.x - horisontalLineLength / 2;
	let y = initialValues.y - verticalLineLength / 2 - range / 2;
	ctx.moveTo(xFrom, y);
	let xTo = initialValues.x + horisontalLineLength / 2;
	ctx.lineTo(xTo,y);
}

function drowVerticalLine(ctx, x){
	let yFrom = initialValues.y - verticalLineLength / 2 +range / 2;
	ctx.moveTo(x, yFrom);
	let yTo = initialValues.y + verticalLineLength / 2 + range / 2;
	ctx.lineTo(x, yTo);
}


function drowCanvas(){
	let canvas = document.getElementById('canvas');
	if (canvas.getContext)
	{
		const patternCanvas = document.createElement('canvas');
		patternCanvas.width = 400;
		patternCanvas.height = 400;
		const patternContext = patternCanvas.getContext('2d');

		patternContext.strokeStyle = "#FFF";
		patternContext.lineWidth = LINE_WIDTH;

		patternContext.beginPath();
		drowHorisontalLine(patternContext);
		drowVerticalLine(patternContext, initialValues.x - horisontalLineLength / 2 - range);
		drowVerticalLine(patternContext, initialValues.x + horisontalLineLength / 2 + range);
		patternContext.stroke();

		let ctx = canvas.getContext('2d');
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		const pattern = ctx.createPattern(patternCanvas, 'repeat');

		let matrix = new DOMMatrix();
		pattern.setTransform(matrix.translate(pos.x, pos.y, 0));

		ctx.fillStyle = pattern;
		ctx.fillRect(0, 0, canvas.width, canvas.height);
	}
}

drowCanvas();