Getting a Canvas Context

The context object from canvas element exposes drawing functions.

HTMLCanvasElement represents the canvas element in the DOM. We can use HTMLCanvasElement to get the context.

The HTMLCanvasElement object:

heightCorresponds to the height attributenumber
widthCorresponds to the width attributenumber
getContext(<context>) Returns a drawing context for the canvasobject

To get the two-dimensional context object, we request pass the 2d argument to getContext(<context>).

canvas {
      border: medium double black;
      margin: 4px
      <canvas id="canvas" width="500" height="100"> 
            Your browser doesn't support the <code>canvas</code> element 
            var ctx = document.getElementById("canvas").getContext("2d");
            ctx.fillRect(10, 10, 50, 50);
Click to view this demo.
  HTML CSS Book 

  1. Getting Started with the Canvas Element
  2. Getting a Canvas Context
  3. Drawing Rectangles
  4. Canvas Drawing State
  5. Setting the Line Join Style
  6. Using Gradients
  7. Using Patterns
  8. Using smaller shapes with an image pattern
  9. Drawing Images
  10. Using Video Images
  11. Using Canvas Images
  12. Setting the Fill & Stroke Styles
  13. Saving and Restoring Drawing State
  14. Drawing Using Paths
  15. Drawing Arcs
  16. Drawing Bezier Curves
  17. Drawing Text
  18. Using Shadows
  19. Using Transparency