HTML Canvas - getContextAttributes() Method

The HTML Canvas getContextAttributes() method of Canvas API returns a Canvas object containing the same context parameters.

These attributes are generally requested by getContext() method on the context creation. It generally returns the context of any graphic drawn inside the canvas element when requested by using its object.

Syntax

Following is the syntax of HTML Canvas getContextAttributes() method

CanvasRenderingContext2D.getContextAttributes();

Parameters

Since it is only a return method, it does not take any parameters.

Return value

The interface CanvasRenderingContext2D method uses the context object and the object parameters are returned via console or window alerts when the HTML Canvas getContextAttributes() method is used by the object.

Example

The following example returns the context parameters of the canvas element in the console using the HTML Canvas getContextAttributes() method. The implementation code is given below.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="Context();">
      <canvas id="canvas" width="200" height="200" style="border: 1px solid black;"></canvas>
      <script>
         function Context() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            console.log(context.getContextAttributes());
         }
      </script>
   </body>
</html>

Output

The output returned by the method on the webpage as −

HTML Canvas getContextAttributes() Method

The output that can be seen on console screen as −

HTML Canvas getContextAttributes() Method

Example

The following example returns the context parameters of a filled rectangle inside canvas element in the console. The implementation code is given below.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="Context();">
      <canvas id="canvas" width="200" height="200" style="border: 1px solid black;"></canvas>
      <script>
         function Context() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            context.fillRect(10, 10, 150, 100);
            console.log(context.getContextAttributes());
         }
      </script>
   </body>
</html>

Output

The output returned by the method on web page as −

HTML Canvas getContextAttributes() Method

The output that can be seen on the console screen as −

HTML Canvas getContextAttributes() Method
html_canvas_rectangles.htm
Advertisements