make8bitart function for drawing pixel on the canvas based on location and width of art frame

make8bitart-original-bitonclick

function bitOnClick(e) {
  prettyPicture = document.getElementById("canvas");
	leftSide = prettyPicture.offsetLeft + document.getElementById("frame").offsetLeft + document.getElementById("container").offsetLeft;
	topSide = prettyPicture.offsetTop + document.getElementById("frame").offsetTop + document.getElementById("container").offsetTop;

	if (e.pageX != undefined && e.pageY != undefined) {
		xPos = e.pageX - leftSide - 8;
		yPos = e.pageY - topSide - 20;
    }
    else {
		xPos = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
		yPos = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    
    if ( xPos > 75 && xPos < 725 && yPos > 75 && yPos < 450 ) {
	    xPos = ( Math.ceil(xPos/25) * 25 ) - 25;
	    yPos = ( Math.ceil(yPos/25) * 25 ) - 25;
	    canvas = document.getElementById("canvas");
	    var ctx = canvas.getContext("2d");
	    
	    if (brushColor == "erase") {
	    	ctx.strokeStyle = "#ffffff";
	    	ctx.fillStyle = "white";
	    	ctx.fillRect(xPos,yPos,25,25);	
	    	ctx.strokeRect(xPos,yPos,24,24);
	    }
	    else {
		    ctx.fillStyle = brushColor;
		    ctx.fillRect(xPos,yPos,25,25);
	    }
    }
    else { /* DON'T VANDALIZE MY ANTIQUE FRAME, YOU JERK! */}
}