JavaScript

Canvas Drawing

Basic Canvas drawing example.

By EZ4Code TeamLast updated: 2026-08-01

canvasdrawing

Code

function draw(canvas) {
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = "#1890ff";
  ctx.fillRect(10, 10, 100, 50);

  ctx.beginPath();
  ctx.arc(200, 80, 40, 0, Math.PI * 2);
  ctx.strokeStyle = "#f5222d";
  ctx.lineWidth = 3;
  ctx.stroke();

  ctx.font = "16px Arial";
  ctx.fillStyle = "#333";
  ctx.fillText("Hello Canvas", 10, 120);
}

Explanation

Demonstrates basic Canvas methods for drawing rectangles, circles, and text.

More JavaScript Snippets

Array Map Filter Reduce

Chain map, filter, reduce, find, some, and every on arrays.

Array Deduplication

Deduplicate an array using Set.

Deep Clone

Deep clone objects, supporting common data types.

Debounce Function

Wait a period of time after an event triggers before executing; reset the timer if triggered again during the wait.

Throttle Function

Limit a function to execute at most once within a time interval.

Promise.all Concurrency Control

A Promise executor with concurrency limit.