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:

Member	Description	Returns
height	Corresponds to the height attribute	number
width	Corresponds to the width attribute	number
getContext(<context>)	Returns a drawing context for the canvas	object

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

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
canvas {
      border: medium double black;
      margin: 4px
}
</style>
</head>
<body>
      <canvas id="canvas" width="500" height="100"> 
            Your browser doesn't support the <code>canvas</code> element 
    </canvas>
      <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            ctx.fillRect(10, 10, 50, 50);
      </script>
</body>
</html>

Click to view this demo.