How would I center the following image editor?

Question

Aratox · Answer

```html Image Editor

``` ```css .container { display: flex; flex-direction: column; align-items: center; margin-top: 20px; } .toolbar { margin-bottom: 10px; } #photo-canvas { border: 1px solid #ccc; } ``` ```javascript const canvas = document.getElementById("photo-canvas"); const ctx = canvas.getContext("2d"); let img = null; let isDrawing = false; const uploadBtn = document.getElementById("upload-btn"); const uploadInput = document.getElementById("upload-input"); const drawBtn = document.getElementById("draw-btn"); const textBtn = document.getElementById("text-btn"); const highlightBtn = document.getElementById("highlight-btn"); const eraseBtn = document.getElementById("erase-btn"); const exportBtn = document.getElementById("export-btn"); const zoomInBtn = document.getElementById("zoom-in-btn"); const zoomOutBtn = document.getElementById("zoom-out-btn"); let zoomLevel = 1; uploadBtn.addEventListener("click", () => uploadInput.click()); uploadInput.addEventListener("change", (e) => { const file = e.target.files[0]; const reader = new FileReader(); reader.onload = () => { img = new Image(); img.onload = () => { canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); zoomLevel = 1; // Set initial zoom level to 100% }; img.src = reader.result; }; reader.readAsDataURL(file); }); drawBtn.addEventListener("click", () => setDrawMode("draw")); textBtn.addEventListener("click", () => setDrawMode("text")); highlightBtn.addEventListener("click", () => setDrawMode("highlight")); eraseBtn.addEventListener("click", () => setDrawMode("erase")); zoomInBtn.addEventListener("click", () => zoomImage(1.2)); zoomOutBtn.addEventListener("click", () => zoomImage(0.8)); exportBtn.addEventListener("click", () => { const link = document.createElement("a"); link.download = "edited-image.png"; link.href = canvas.toDataURL(); link.click(); }); canvas.addEventListener("mousedown", startDraw); canvas.addEventListener("mousemove", draw); canvas.addEventListener("mouseup", stopDraw); canvas.addEventListener("touchstart", startDraw); canvas.addEventListener("touchmove", draw); canvas.addEventListener("touchend", stopDraw); function startDraw(e) { isDrawing = true; ctx.beginPath(); if (e.type === "mousedown") { ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop); } else if (e.type === "touchstart") { ctx.moveTo( e.touches[0].clientX - canvas.offsetLeft, e.touches[0].clientY - canvas.offsetTop ); } } function draw(e) { if (!isDrawing) return; if (e.type === "mousemove") { ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop); } else if (e.type === "touchmove") { ctx.lineTo( e.touches[0].clientX - canvas.offsetLeft, e.touches[0].clientY - canvas.offsetTop ); } ctx.stroke(); } function stopDraw() { isDrawing = false; ctx.closePath(); } function setDrawMode(mode) { drawMode = mode; switch (mode) { case "draw": drawColor = "black"; drawWidth = 2; ctx.strokeStyle = drawColor; ctx.lineWidth = drawWidth; break; case "text": drawColor = "black"; drawWidth = 2; ctx.strokeStyle = drawColor; ctx.lineWidth = drawWidth; const text = prompt("Enter text"); if (text) { ctx.font = "16px Arial"; ctx.fillText(text, 10, 20); } break; case "highlight": drawColor = "yellow"; drawWidth = 10; ctx.strokeStyle = drawColor; ctx.lineWidth = drawWidth; break; case "erase": drawColor = "white"; drawWidth = 10; ctx.strokeStyle = drawColor; ctx.lineWidth = drawWidth; break; } } function zoomImage(scale) { let newZoomLevel = zoomLevel * scale; if (newZoomLevel >= 0.25 && newZoomLevel <= 10) { zoomLevel = newZoomLevel; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, img.width * zoomLevel, img.height * zoomLevel); } } ```

jayfafr · Answer

To center the image editor on the page, you can wrap your existing content inside a container and then apply CSS to center the container.

jayfafr · Answer

Image Editor

Aratox · Answer

Please note that I have three code snippets in the comment above, not 1, make sure to look through all of them.

Aratox · Answer

The first code snippet is of HTML, the second - CSS, and the last - JavaScript.

jayfafr · Answer

holy your a trooper

Aratox · Answer

Nah, it's all included on the code builder that I'm using - it only allows HTML, CSS, and JavaScript, although all three don't have to be used. I'm using Codepen to build this image editor, and I'm trying to build it to be even more advanced than the Pixlr image editor.

somnium · Answer

what does any of that mean 
buT HIII ARAAAA

Aratox · Answer

Hello, somnium :)
if u want to we can dm, just not here, ok?

somnium · Answer

i forgot my password for hummus cuz im dumb and google wont autofill it so this is what i have for a while TvT