docs: fix remaining embedded snippets

site/docs/04-graphics/04.2-canvas.mdx

@@ -4,6 +4,10 @@ slug: /canvas
 section: Graphics
 ---
 
+```twoslash include ex
+/// <reference path="../src/engine/excalibur.d.ts" />
+```
+
 For drawing hooks the `ExcaliburGraphicsContext` replaces the browser `CanvasRenderingContext2D`. However, if you need to do some custom drawing using the `CanvasRenderingContext2D` the new [[Canvas]] graphic has your back.
 
 The canvas is a special type of graphic that acts like a shim between direct CanvasRenderingContext2D drawing and the [ExcaliburGraphicsContext](#ExcaliburGraphicsContext).
@@ -28,6 +32,26 @@ const canvas = new Canvas({
 
 ## Example
 
-`embed:excalibur-snippets/src/canvas/main.ts{snippet: "canvas"}`
+```ts twoslash
+// @include: ex
+declare const game: ex.Engine;
+// ---cut---
+const canvas = new ex.Canvas({
+    width: 200,
+    height: 200,
+    cache: true,  // If true draw once until flagged dirty again, otherwise draw to Canvas every frame
+    draw: (ctx) => {
+        console.log('With cache=true I draw once');
+        ctx.fillStyle = 'red';
+        ctx.fillRect(0, 0, 200, 200);
+    }
+})
+
+const actor = new ex.Actor({
+    pos: game.screen.center
+});
+
+actor.graphics.use(canvas);
+```
 
 <IFrameEmbed src="https://excaliburjs.com/excalibur-snippets/canvas/" />

site/docs/05-entity-component-system/05.3-systems.mdx

@@ -4,6 +4,11 @@ slug: /systems
 section: Entity Component System
 ---
 
+```twoslash include ex
+/// <reference path="../src/engine/excalibur.d.ts" />
+declare const game: ex.Engine;
+```
+
 Core behavior in Excalibur is implemented by Systems. Systems process all entities that have matching component types and perform some action.
 
 Examples of systems are the [[GraphicsSystem]], [[MotionSystem]], [[CollisionSystem]], and [[DebugSystem]]
@@ -59,7 +64,56 @@ For custom component types it is recommended you prefix your types, like `type =
 
 In this example, we create a "search" type component, that searches for a target position. Notice how this component implementation is mostly data.
 
-`embed:excalibur-snippets/src/ecs/main.ts{snippet: "ecs"}`
+```ts twoslash
+// @include: ex
+// ---cut---
+class SearchComponent extends ex.Component<'search'> {
+    public readonly type = 'search'
+    constructor(public target: ex.Vector) {
+        super();
+    }
+}
+
+class SearchSystem extends ex.System<ex.TransformComponent | SearchComponent> {
+    // Types need to be listed as a const literal
+    public readonly types = ['ex.transform', 'search'] as const;
+
+    // Lower numbers mean higher priority
+    // 99 is low priority
+    public priority = 99;
+
+    // Run this system in the "update" phase
+    public systemType = ex.SystemType.Update
+
+    private _searchSpeed = 100 // pixels/sec
+
+    public update(entities: ex.Entity[], delta: number) {
+        for (let entity of entities) {
+            const target = entity.get(SearchComponent)!.target;
+            // ex.TransformComponent is a built in type
+            const transform = entity.get(ex.TransformComponent) as ex.TransformComponent;
+
+            const direction = target.sub(transform.pos);
+            const motion = direction.normalize().scale(this._searchSpeed);
+
+            // Moves these entities towards the target at 10 pixels per second
+            transform.pos = transform.pos.add(motion.scale(delta / 1000))
+        }
+    }
+}
+
+const scene = new ex.Scene();
+scene.world.add(new SearchSystem());
+
+// Actors come with batteries included built in features
+const actor = new ex.Actor({
+    pos: ex.vec(100, 100),
+    width: 30,
+    height: 30,
+    color: ex.Color.Red
+});
+actor.addComponent(new SearchComponent(ex.vec(600, 400)));
+```
 
 <IFrameEmbed src="https://excaliburjs.com/excalibur-snippets/ecs/" />
 

site/docs/12-other/11-patterns.mdx

@@ -4,6 +4,11 @@ slug: /patterns
 section: Other
 ---
 
+```twoslash include ex
+/// <reference path="../src/engine/excalibur.d.ts" />
+declare const game: ex.Engine;
+```
+
 Here are a few patterns and guidelines that you can use in your Excalibur projects.
 
 ## Project Structure
@@ -37,7 +42,35 @@ Keep the `main.ts` entrypoint as small as possible (this is where we create a ne
 
 Keep all of our assets/resources in one file `resources.ts` and load them all at once in the `main.ts`
 
-`embed:excalibur-snippets/src/resources/main.ts{snippet: "resources"}`
+```ts twoslash
+// @include: ex
+declare interface Object {
+  values(res: any): ex.Resource<any>[];
+}
+// ---cut---
+// Because snippets uses a bundler we load the image with an import
+// Optionally do this
+// import playerUrl from './player.png';
+
+// If you aren't using a bundler like parcel or webpack you can do this:
+// const imagePlayer = new ex.ImageSource('./player.png')
+const Resources = {
+    ImagePlayer: new ex.ImageSource('./player.png'),
+    //... more resources
+} as const; // <-- Important for strong typing
+
+const loader = new ex.Loader();
+for (let res of Object.values(Resources)) {
+  loader.addResource(res);
+}
+
+class Player extends ex.Actor {
+    public onInitialize(engine: ex.Engine) {
+        // set as the "default" drawing
+        this.graphics.use(Resources.ImagePlayer.toSprite());
+    }
+}
+```
 
 <IFrameEmbed src="https://excaliburjs.com/excalibur-snippets/resources/" />