GoCareerGo Tutorials

HTML Tutorial

Tags, attributes, HTML5 APIs and semantic markup — the web's foundation.

HTML5 Canvas

<canvas> is a blank drawing surface — everything on it is drawn imperatively with JavaScript, pixel by pixel.

<canvas id="c" width="300" height="150"></canvas>
<script>
  const ctx = document.getElementById('c').getContext('2d');
  ctx.fillStyle = 'teal';
  ctx.fillRect(10, 10, 100, 60);
</script>

Tip

Contrast with SVG: canvas is pixel-based and imperative; SVG is vector-based and part of the DOM.