window.HTMLCanvasElement
See: Web APIs - HTMLCanvasElement for more details
UXP HTMLCanvasElement supports only basic shapes for now.
Also, refer the following interfaces
- CanvasRenderingContext2D
- CanvasGradient
- 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.
Note: Only '2d' context is supported.
Returns: CanvasRenderingContext2D
- A 2D rendering context (CanvasRenderingContext2D) object.
See: HTMLCanvasElement - getContext() for more details
Since: v7.0.0
Param | Type | Description |
---|---|---|
contextType | string | A string containing the context identifier defining the drawing context associated to the canvas. Supports only '2d'. |
Example
Copied to your clipboard1// 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");1415 function show_height() {16 console.log("Canvas Height: "+ canvas.height);17 }1819 function show_width() {20 console.log("Canvas Width: "+ canvas.width);21 }2223 // Function to get the canvas context and draw a triangle using lines24 function getContext() {25 let context = canvas.getContext("2d"); // get's the canvas context2627 // 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 documentation28 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>