HTML Canvas API

Draw graphics, shapes, and animations directly in the browser with JavaScript.

❮ Previous Next ❯

The <canvas> element is used to draw graphics on a web page via scripting (usually JavaScript). It can be used for rendering graphs, game graphics, or image editing.

Canvas Coordinate System

Canvas uses a 2D coordinate space where (0,0) is the top-left corner. You access the drawing context via getContext("2d").

Key Takeaways: HTML Canvas API

Mastering HTML Canvas API helps you write clean and reliable HTML code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

HTML Canvas API Code Example

HTML

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #ccc;"></canvas>
<script>
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = "#2563EB";
  ctx.fillRect(20, 20, 150, 60);
</script>

Output

Renders a blue rectangle inside a 200x100 canvas

Free sign-in required · Google login available

Finished this lesson?

Mark it complete to track your progress.

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services

HTML Canvas API

Canvas Coordinate System

💡 Key Takeaways: HTML Canvas API

HTML Canvas API Code Example

Key Takeaways: HTML Canvas API