NSDraw

Variables

W Canvas width in pixels.

H Canvas height in pixels.

mx Mouse / touch X position.

my Mouse / touch Y position.

Functions

clear({ color }) Fill the whole canvas with color. Default: "#000000".

clear({ color: "navy" });

draw_rect({ x, y, w, h, fill, stroke, lineWidth }) Draw a rectangle. x, y are the top-left corner.

draw_rect({
  x: 10, y: 10,
  w: 100, h: 50,
  fill: "red",
});

draw_circle({ x, y, r, fill, stroke, lineWidth }) Draw a circle centered at x, y with radius r.

draw_circle({
  x: 200, y: 200,
  r: 40,
  fill: "gold",
  stroke: "white",
  lineWidth: 2,
});

draw_line({ x1, y1, x2, y2, color, lineWidth }) Draw a line from (x1, y1) to (x2, y2).

draw_line({
  x1: 0,   y1: 0,
  x2: 100, y2: 100,
  color: "cyan",
  lineWidth: 3,
});

draw_text({ text, x, y, font, fill, align }) Draw text at x, y. align can be "left", "center", or "right".

draw_text({
  text: "Hello!",
  x: W/2, y: H/2,
  font: "32px monospace",
  fill: "white",
  align: "center",
});

draw_poly({ points, fill, stroke, lineWidth }) Draw a closed polygon. points is an array of { x, y } objects.

draw_poly({
  points: [
    { x: 100, y: 50  },
    { x: 150, y: 150 },
    { x: 50,  y: 150 },
  ],
  fill: "orchid",
});

loop(fn) Call fn every animation frame. fn receives dt — milliseconds since the last frame.

loop((dt) => {
  clear({ color: "#111" });
  draw_circle({ x: mx, y: my, r: 20 });
});

JS Basics

// comment Lines starting with // are ignored by the computer. Use them for notes.

let name = value; Create a variable and give it a value. You can change it later.

let x = 0;
x = x + 1; // now x is 1
x++;        // shorthand for +1

const name = value; Like let, but the variable cannot be reassigned.

const PI = 3.14159;

if / else Run code only when a condition is true.

if (x > 100) {
  x = 0;
} else {
  x++;
}

for loop Repeat code a set number of times.

for (let i = 0; i < 10; i++) {
  draw_circle({
    x: i * 50, y: 100, r: 20,
  });
}

function Define reusable blocks of code.

function greet(name) {
  draw_text({
    text: "Hi " + name,
    x: 50, y: 50,
  });
}
greet("world");

Math Built-in math utilities.

Math.random()    // 0 to 1
Math.floor(3.7)  // 3
Math.sin(angle)  // sine
Math.cos(angle)  // cosine
Math.PI          // 3.14159…
Math.min(a, b)
Math.max(a, b)

Colors Any CSS color works: names, hex codes, hsl, or rgba.

"red"
"#FF4500"
"hsl(200, 80%, 60%)"
"rgba(255, 0, 0, 0.5)"