getContext method (Windows)

0 out of 2 rated this helpful - Rate this topic

Returns an object that provides methods and properties for drawing and manipulating images and graphics on a canvas element in a document.

Syntax

var retval = canvas.getContext(contextId);

Parameters

contextId [in]

Type: String

The identifier (ID) of the type of canvas to create.

Currently, a Windows Store app using JavaScript supports only a 2-D context.

Return value

Type: ICanvasRenderingContext2D

The context object.

Standards information

The canvas element, Section 4.8.11

Remarks

The getContext method returns null if the contextId value is not supported.

Note A canvas object only supports one context. Additional calls to getContext this object return the same context.

Examples

The following code example uses getContext to get a context to use to show a filled rectangle and filled text.

HTML


<head>
  <title>getContext example</title>
  <script type="text/javascript">
      function draw() {
          var canvas = document.getElementById("MyCanvas");
          if (canvas.getContext) {
              var ctx = canvas.getContext("2d");
              ctx.font = "italic 36px/2 Unknown Font, sans-serif";
              ctx.fillStyle = "blue";
              ctx.fillRect(0, 0, canvas.width, canvas.height);
              ctx.fillStyle = "white";
              ctx.fillText("Hello World", canvas.width / 2, canvas.height * .8);
          }
      }
</script>
</head>
<body onload="draw()">
      <div>
        <canvas id="MyCanvas" width="500" height="500" > </canvas>
      </div>
  </body>
</html>

getContext method