body {
	font-family: Arial;
	font-size: 16px;
	line-height: 1.5;
	
	background-color: #ff4141;
	color: #000000;
	
}


canvas {
  position: fixed;
  top: 50%;
  left: 50%;
/* This has put the canvas in the middle of the page, however the text was not in the center of the canvas
 this means the a looks like it is out of position, to fix this i need to center the drawn text */
  transform: translate(-50%, -50%);

}