Improve canvas positioning and add detailed installation instructions

Remove grid layout for canvas and implement absolute positioning for pixels, along with a comprehensive installation guide for server deployment.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 0385ea33-cde8-4bbd-8fce-8d192d30eb41
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/870d08ce-da3b-4822-9874-c2fe2b7628b1/0385ea33-cde8-4bbd-8fce-8d192d30eb41/7Hr2NPt

client/src/components/canvas.tsx

@@ -62,11 +62,9 @@ export function Canvas({
   }, [zoom]);
 
   const canvasStyle = {
-    gridTemplateColumns: `repeat(${canvasWidth}, ${pixelSize}px)`,
-    gridTemplateRows: `repeat(${canvasHeight}, ${pixelSize}px)`,
     width: `${canvasWidth * pixelSize}px`,
     height: `${canvasHeight * pixelSize}px`,
-    backgroundSize: `${pixelSize}px ${pixelSize}px`,
+    position: 'relative' as const,
   };
 
   return (
@@ -115,7 +113,7 @@ export function Canvas({
 
             {/* Main Canvas */}
             <div 
-              className="grid border border-gray-400 relative"
+              className="border border-gray-400 relative"
               style={canvasStyle}
               data-testid="pixel-canvas"
             >
@@ -126,13 +124,15 @@ export function Canvas({
                 <div
                   key={`${x}-${y}`}
                   className={cn(
-                    "pixel cursor-pointer transition-all duration-100 hover:scale-110 hover:z-10 relative",
+                    "pixel cursor-pointer transition-all duration-100 hover:scale-110 hover:z-10 absolute",
                     cooldownActive && "cursor-not-allowed"
                   )}
                   style={{ 
                     backgroundColor: pixelColor,
                     width: `${pixelSize}px`,
-                    height: `${pixelSize}px`
+                    height: `${pixelSize}px`,
+                    left: `${x * pixelSize}px`,
+                    top: `${y * pixelSize}px`
                   }}
                   onClick={() => handlePixelClick(x, y)}
                   onMouseEnter={() => handlePixelMouseEnter(x, y)}