Getting Started with Codetoy

To create a project in Codetoy you can remix an existing project (by clicking the Remix button), or make one from scratch.

To make one from scratch make sure you are logged in and head to the Home page by clicking on your username in the top right. Once there you should see a button that says New Project click that to get started.

Every codetoy begins by first getting a canvas through the oncanvas event. Create a new main.ts file and write the following in it:

let context;

addEventListener("message", ({ data }) => {
  const { type, payload } = data;

  if (type === "oncanvas") {
    context = payload.canvas.getContext("2d");
  }
});

How does this work?

1. Every codetoy receives input through addEventListener. Before we can do anything we need to be able to draw things to the screen so we wait for a message event of type "oncanvas".

2. The message event can recieve different types of messages, which is defined by the type. Check the Input Events docs for more info.

   • type: In this case, we're looking for the "oncanvas" event type.
   • payload: In this case it includes an OffscreenCanvas which we can get through the canvas property.

3. Gets a context from the OffscreenCanvas. This can be any of the following:

   • "2d" CanvasRenderingContext2D can draw shapes, lines, curves, boxes, text, and images, with colors, rotations, transparencies, and other pixel manipulations.

   • "webgl" WebGL an OpenGL based graphics API.

   • "webgl2" WebGL2 an OpenGL ES 3.0 based graphics API.

   • "webgpu" WebGPU a new, modern graphics API for the web that enables web applications to utilize the capabilities of the GPU (Graphics Processing Unit) for high-performance rendering and compute tasks.

Basic Drawing Operations

Drawing Loop

To draw we need a drawing loop. This can be setup easily with requestAnimationFrame:

let canvas;
let context;

addEventListener("message", ({ data }) => {
  const { type, payload } = data;

  if (type === "oncanvas") {
    canvas = payload.canvas;
    context = canvas.getContext("2d");

    // Start the render loop
    frame();
  }
});

function frame() {
  // Clear previous frame
  context.clearRect(0, 0, canvas.width, canvas.height);

  // Draw your content here

  // Schedule next frame
  requestAnimationFrame(frame);
}

Drawing Shapes

// Draw a rectangle
context.fillStyle = "red";
context.fillRect(x, y, width, height);

// Draw a circle
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI);
context.fill();

// Change styles
context.fillStyle = "blue";
context.strokeStyle = "red";
context.lineWidth = 5;

// Draw a line
context.beginPath();
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.stroke();

Check the MDN docs to learn more about what a canvas can do:

1. Basic usage
2. Drawing shapes
3. Applying styles and colors
4. Drawing text
5. Using images
6. Transformations
7. Compositing and clipping
8. Basic animations
9. Advanced animations
10. Pixel manipulation
11. Optimizing the canvas
12. WebGL - 2D and 3D graphics for the web

Complete Example

Here's a simple example codetoy that draws a bouncing ball:

let canvas;
let context;
let x = 100;
let y = 100;
let dx = 2;
let dy = 2;

addEventListener("message", ({ data }) => {
  const { type, payload } = data;

  if (type === "oncanvas") {
    canvas = payload.canvas;
    context = canvas.getContext("2d");

    frame();
  }
});

function frame() {
  // Clear canvas
  context.clearRect(0, 0, canvas.width, canvas.height);

  // Update position
  x += dx;
  y += dy;

  // Bounce off walls
  if (x < 0 || x > canvas.width) dx = -dx;
  if (y < 0 || y > canvas.height) dy = -dy;

  // Draw ball
  context.beginPath();
  context.arc(x, y, 20, 0, 2 * Math.PI);
  context.fillStyle = "blue";
  context.fill();

  requestAnimationFrame(frame);
}