--- title: "A Full-Screen Drawing Canvas in the Browser, With No Account" description: "A blank canvas that fills the window and opens in one click. Pencil, shapes, text and Mermaid flowcharts, with no signup — and your drawing never leaves the browser, which this post explains rather than just asserts." canonical: "https://www.razi.pro/blog/full-screen-drawing-canvas-online-free" date: "2026-09-07" tags: ["Drawing", "Canvas", "Tools", "Privacy", "How-To"] source: "razi.pro" --- # A Full-Screen Drawing Canvas in the Browser, With No Account You wanted to sketch one idea. Thirty seconds later you are looking at a signup form, a template gallery and a modal about a free trial. The thing you actually wanted — a blank surface and a pencil — is four clicks away and surrounded by chrome. That gap is the whole reason this page exists. ## What "free" usually means Most browser drawing tools are the front door of a design product. That shapes them in three predictable ways. They gate the thing you came for behind an account, because the account is the product. They surround the canvas with panels, because the panels are where the features live. And they treat your drawing as a document on their servers, because that is what makes you come back. None of that is dishonest. It is just a different product from the one you wanted when you thought "I need to draw a box and an arrow." ## Opening a blank canvas The [drawing canvas](https://www.razi.pro/tools/draw) opens straight onto the surface. There is a toolbar along the top and everything below it is canvas. That is a layout decision rather than a feature: the canvas element is set to fill the remaining space and a `ResizeObserver` re-fits it whenever the window changes, so it is always as large as the window allows. There is no document to create first and no dialogue asking what size you want. One detail worth knowing, because it is the difference between a sketch that looks crisp and one that looks slightly soft. The canvas is sized by device pixel ratio: canvas.width = rect.width * ratio canvas.height = rect.height * ratio On a retina or high-DPI screen that means the backing store is drawn at 2x and displayed at 1x. Your exported PNG comes out at the higher resolution, not at CSS pixel size. ## The tools Deliberately few, and all reachable from the top bar. **Pencil**, with adjustable width from 1 to 10 pixels. **Text**, from 12 to 120 points. **Shapes** — rectangle, circle and arrow. **Eraser**, sized 10 to 50 pixels. And **select**, which lets you pick up text and diagram elements and move them after the fact rather than undoing back to them. Sixteen preset colours sit alongside a custom picker, and the background toggles between light and dark. Undo and redo keep a full history. ## Where the drawing lives This is the part worth being precise about, because "nothing is uploaded" is a claim every tool makes and few explain. The drawing is a canvas element in your browser. Every stroke, every shape and every export happens there. Exporting a PNG is a call to `canvas.toDataURL("image/png")` handed to a download link — the bytes go from your browser to your disk without a round trip. Copying to the clipboard uses `ClipboardItem` in the same way. There is no upload endpoint, because there is nothing to upload to. The page makes no network requests while you draw. > **The one exception, stated precisely.** > If you are signed in, exporting records a session entry — the number of elements, the background colour, the output format. That is metadata about the action, not the artwork; the image itself is never transmitted. If you are not signed in, the save path returns immediately and nothing is sent at all. Worth knowing exactly where the line is rather than trusting a slogan. The practical consequence: close the tab and the drawing is gone. Which is why the next section matters. ## Saving and exporting Three ways out, and they do different jobs. **Download PNG** gives you a flat image at the canvas's real resolution. This is what you want for a pull request, a message or a document. **Save project** writes a `.json` file containing the elements — paths, text, shapes and diagrams as data rather than pixels. Load it back later and everything is still individually editable. This is the one people miss, and it is the difference between a sketch you can revise and a picture of a sketch. **Copy to clipboard** puts the PNG straight on the clipboard, which is usually faster than downloading and re-attaching. Because the project file is plain JSON on your machine, it is also the only thing that survives closing the tab. If a drawing matters, save the project, not just the PNG. ## On a tablet Pointer events mean a stylus works the way you would expect, and the toolbar is reachable one-handed. The canvas re-fits on rotation because the same resize observer fires. What you do not get is pressure sensitivity — line width is whatever the slider says, not how hard you press. If varying pressure is central to how you draw, this is the honest boundary: use a drawing app. ## Mermaid flowcharts on the same canvas The part that makes this more than a sketchpad. You can drop a Mermaid diagram onto the canvas from code, then draw on top of it — circle the bottleneck, add an arrow, annotate it, and export the result as one image. Every other Mermaid editor renders your diagram and stops. That is covered properly in [Mermaid diagrams you can actually draw on](https://www.razi.pro/blog/mermaid-diagram-editor-with-annotation). ## When to use something else Worth saying plainly, because a tool that claims to replace everything replaces nothing. If several people need to be on the same board at once, you want a collaborative whiteboard — there is no multiplayer here. If you are producing finished artwork with layers, masks and blend modes, you want a real editor. If you want templates and brand kits, you want a design product; this has neither, on purpose. What is left over is the case this handles well: you need a surface right now, you need it to be large, and you do not want to make an account to get it. When you are done, [compress the PNG](https://www.razi.pro/tools/image-compress) before attaching it anywhere — a full-window retina canvas exports bigger than you expect. If you are picking colours for something else afterwards, the [colour palette generator](https://www.razi.pro/tools/color-palette) is next door.