docs: use a canvas demo for $effect

[Rich-Harris]

Reviewing the $effect docs in light of #10740, I think we can make a few improvements. Submitting them as separate PRs so they can be discussed independently.

The examples we use provide framing for how constructs are supposed to be used. I think we've been making a mistake, therefore, by using console.log in $effect examples when $inspect is a better tool for the job.

The current example is rather confusing in other ways:

• the button that changes count contains {double} (mea culpa)
• it says that the effect won't re-run when double changes because it's read inside a setTimeout, but it will re-run when double changes because it re-runs when count changes, and double changes when count changes

[changeset-bot]

⚠️ No Changeset found

Latest commit: a755d95

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[leoj3n]

I tried both demos and they work. Far more understandable and more fun too.

[dummdidumm]

Yeah this reads better, have some suggestions though.