# NodeRed: Creating a canvas with ui\_template and displaying it in the associated ui page

**URL:** https://discourse.nodered.org/t/nodered-creating-a-canvas-with-ui-template-and-displaying-it-in-the-associated-ui-page/76109
**Category:** Dashboard
**Tags:** node-red-dashboard
**Created:** [4 March 2023 15:28 UTC](https://discourse.nodered.org/t/nodered-creating-a-canvas-with-ui-template-and-displaying-it-in-the-associated-ui-page/76109 "2023-03-04T15:28:24Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![caio\_lorenzo](https://avatars.discourse-cdn.com/v4/letter/c/898d66/32.png) [@caio\_lorenzo](https://discourse.nodered.org/u/caio_lorenzo)
#### Post date: [4 March 2023 15:28 UTC](https://discourse.nodered.org/t/nodered-creating-a-canvas-with-ui-template-and-displaying-it-in-the-associated-ui-page/76109/1 "2023-03-04T15:28:24Z")

</div>

I am trying to create a canvas with a ui\_template node, with the following code:

```auto
<div style="width: 200px; height: 200px;">
  <canvas id="myCanvas"></canvas>
</div>

<script>
  (function() {

    // Obtain canvas
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    // Draw the dots
    function drawPoint(x, y, color) {
      ctx.beginPath();
      ctx.arc(x, y, 5, 0, 2 * Math.PI);
      ctx.fillStyle = color;
      ctx.fill();
    }

    
    var nodes = ["function_7", "function_8", "function_9"];
    for (var i = 0; i < nodes.length; i++) {
      (function(node, index) {
        node.on("input", function(msg) {
          if (msg.payload.x !== undefined && msg.payload.y !== undefined) {
            drawPoint(msg.payload.x, msg.payload.y, "red");
          }
        });
      })(RED.nodes.getNode(nodes[i]), i);
    }

  })();
</script>

```

Also, each node specified in the nodes array is a function node, which sends two values: msg.payload.x and msg.payload.y, with known values; the objective is to create a canvas where the three dots from each function are displayed

The thing is I can't visualize the created canvas in the corresponding ui page, and I don't know why, if I also specified a Group where the template is displayed. Thus, I ask for help. Thank you

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [4 March 2023 16:10 UTC](https://discourse.nodered.org/t/nodered-creating-a-canvas-with-ui-template-and-displaying-it-in-the-associated-ui-page/76109/2 "2023-03-04T16:10:07Z")

</div>

Hello and welcome 🙂

You can't access server side functions any way at front-end side. But you can watch incoming messages.  
Modified your code to receive an array of points and draw those points on canvas.

```auto
[{"id":"c74cc62dfa492aea","type":"function","z":"09deee63c1b960f7","name":"function 2","func":"msg.payload = [\n {x:10,y:20},\n { x: 30, y: 50 },\n { x: 60, y: 80 },\n \n]\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":280,"y":2180,"wires":[["b402ba7bc4ae9cc5"]]},{"id":"811d4a6bd0ee686e","type":"inject","z":"09deee63c1b960f7","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":100,"y":2180,"wires":[["c74cc62dfa492aea"]]},{"id":"b402ba7bc4ae9cc5","type":"ui_template","z":"09deee63c1b960f7","group":"08ac9b242ae51e8c","name":"","order":15,"width":"6","height":"6","format":"\n<canvas id=\"myCanvas\"></canvas>\n\n\n<script>\n(function(scope) {\n\n\n\n const canvas = document.getElementById(\"myCanvas\");\n const ctx = canvas.getContext(\"2d\");\n\n // Draw the dots\n const drawPoint = function(x, y, color) {\n ctx.beginPath();\n ctx.arc(x, y, 5, 0, 2 * Math.PI);\n ctx.fillStyle = color;\n ctx.fill();\n }\n\n scope.$watch('msg', function(msg) {\n if (msg) {\n\n msg.payload.forEach(el => {\n drawPoint(el.x,el.y,'red')\n })\n \n \n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":480,"y":2180,"wires":[[]]},{"id":"08ac9b242ae51e8c","type":"ui_group","name":"Default","tab":"2acb95821445c8af","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"2acb95821445c8af","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

### Author: ![caio\_lorenzo](https://avatars.discourse-cdn.com/v4/letter/c/898d66/32.png) [@caio\_lorenzo](https://discourse.nodered.org/u/caio_lorenzo)
#### Post date: [4 March 2023 16:42 UTC](https://discourse.nodered.org/t/nodered-creating-a-canvas-with-ui-template-and-displaying-it-in-the-associated-ui-page/76109/3 "2023-03-04T16:42:18Z")

</div>

Thank you!! I will try with the code you wrote! 😁

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [4 March 2023 16:59 UTC](https://discourse.nodered.org/t/nodered-creating-a-canvas-with-ui-template-and-displaying-it-in-the-associated-ui-page/76109/4 "2023-03-04T16:59:46Z")

</div>

Are you using any of Dashboards features or just `ui_template`? If not, you might find this easier to do with uibuilder which doesn't load all of the heavyweight AngularJS stuff but still offers plenty of interaction between node-red and your front-end.

---

<div class="post-metadata">

### Author: ![caio\_lorenzo](https://avatars.discourse-cdn.com/v4/letter/c/898d66/32.png) [@caio\_lorenzo](https://discourse.nodered.org/u/caio_lorenzo)
#### Post date: [5 March 2023 17:02 UTC](https://discourse.nodered.org/t/nodered-creating-a-canvas-with-ui-template-and-displaying-it-in-the-associated-ui-page/76109/5 "2023-03-05T17:02:40Z")

</div>

I was trying to use only the "ui\_template" node to attain my objective, which is also a node from the dashboard group of nodes. As you specify a group to display what you create, that's why I was trying with it. Thank you for your answer, I will look up into the uibuilder node !!

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [19 March 2023 17:03 UTC](https://discourse.nodered.org/t/nodered-creating-a-canvas-with-ui-template-and-displaying-it-in-the-associated-ui-page/76109/6 "2023-03-19T17:03:18Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.