I am trying to create a canvas with a ui_template node, with the following code:
<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
