# Learn Creative Coding (#9) - Creative Coding Without Libraries: Vanilla Canvas API ![cc-banner](https://0x0.st/PSsL.png) Time for the training wheels to come off. p5.js is fantastic and I'll keep using it. But under the hood, it's wrapping the HTML5 Canvas API — a native browser feature that needs zero libraries, zero CDN links, zero npm installs. Understanding what's underneath makes you faster, gives you more control, and lets you build things that don't fit neatly into p5's `setup()`/`draw()` model. Plus — and this is the real reason — if you ever want to do serious creative coding work (think installations, data visualizations, game engines, custom WebGL pipelines), every single framework you'll encounter is built on Canvas. Knowing the raw API is the difference between using a tool and understanding a tool. Fair warning: this one's more code-heavy than usual. I'm going to show you everything the Canvas can do, then we'll build something real with it at the end. ## Setting up: just HTML and a script tag No editor.p5js.org this time. No CDN. Create two files: ```html

``` And `sketch.js`: ```javascript const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // done. ctx is your drawing tool now. console.log(ctx); // CanvasRenderingContext2D ``` No `setup()`, no `draw()`, no global mode, no preload. You are in charge of everything. That `ctx` object — short for "rendering context" — is how you draw. Every shape, every color, every transformation goes through it. One thing that trips people up: the `

הרשתות החברתיות נכשלו