window.HTMLCanvasElement

See: Web APIs - HTMLCanvasElement for more details

Also, refer the following interfaces

1. CanvasRenderingContext2D
2. CanvasGradient
3. Path2D
   Since: v7.0.0

height : number

Get the height of the canvas element.

See: HTMLCanvasElement - height for more details

width : number

Get the width of the canvas element.

See: HTMLCanvasElement - width for more details

getContext(contextType)

Creates a 2D drawing context on the canvas.

Returns: CanvasRenderingContext2D - A 2D rendering context (CanvasRenderingContext2D) object.
See: HTMLCanvasElement - getContext() for more details
Since: v7.0.0

Example

// 1. Provide the canvas tag in your HTML document.
  <sp-body id="layers">
    <canvas id="canvas" height="230" width="1500"></canvas>
  </sp-body>
  <footer>
  <!-- Button Events to invoke height, width and context of canvas -->
    <sp-button id="btnPopulateLoadScript" onclick="show_height()">Canvas Height</sp-button>
    <sp-button id="btnPopulateLoadScript" onclick="show_width()">Canvas Width</sp-button>
    <sp-button id="btnPopulateLoadScript" onclick="getContext()">Get Context</sp-button>
  </footer>
// 2. You can now get the width, height and context using JavaScript under <script> tag, as shown below.
<script>
  const canvas = document.getElementById("canvas");

  function show_height() {
    console.log("Canvas Height: "+ canvas.height);
  }

  function show_width() {
    console.log("Canvas Width: "+ canvas.width);
  }

  // Function to get the canvas context and draw a triangle using lines
  function getContext() {
     let context = canvas.getContext("2d"); // get's the canvas context

     // Draw a triangle. For more details on the below apis refer to interfaces such as CanvasRenderingContext2D, CanvasGradient. The details of the interfaces are shared as a link at the top of this documentation
     context.beginPath();
     context.moveTo(50,50);
     context.lineTo(100, 50);
     context.lineTo(100, 100);
     context.lineTo(50,50)
     context.closePath();
     context.stroke();
  }
</script>
CopyCopied to your clipboard
1// 1. Provide the canvas tag in your HTML document.
2  <sp-body id="layers">
3    <canvas id="canvas" height="230" width="1500"></canvas>
4  </sp-body>
5  <footer>
6  <!-- Button Events to invoke height, width and context of canvas -->
7    <sp-button id="btnPopulateLoadScript" onclick="show_height()">Canvas Height</sp-button>
8    <sp-button id="btnPopulateLoadScript" onclick="show_width()">Canvas Width</sp-button>
9    <sp-button id="btnPopulateLoadScript" onclick="getContext()">Get Context</sp-button>
10  </footer>
11// 2. You can now get the width, height and context using JavaScript under <script> tag, as shown below.
12<script>
13  const canvas = document.getElementById("canvas");
14
15  function show_height() {
16    console.log("Canvas Height: "+ canvas.height);
17  }
18
19  function show_width() {
20    console.log("Canvas Width: "+ canvas.width);
21  }
22
23  // Function to get the canvas context and draw a triangle using lines
24  function getContext() {
25     let context = canvas.getContext("2d"); // get's the canvas context
26
27     // Draw a triangle. For more details on the below apis refer to interfaces such as CanvasRenderingContext2D, CanvasGradient. The details of the interfaces are shared as a link at the top of this documentation
28     context.beginPath();
29     context.moveTo(50,50);
30     context.lineTo(100, 50);
31     context.lineTo(100, 100);
32     context.lineTo(50,50)
33     context.closePath();
34     context.stroke();
35  }
36</script>