Add a canvas to a widget dynamically?

[GregRieck]

Hello,

How can I add a canvas to a widget dynamically?

var canvas = document.createElement("canvas");
canvas.id = 'outer';
canvas.width = '300' ;
canvas.height = '200';
canvas.style.border = '2x solid';
if (!canvas.getContext) return;
var ctx = canvas.getContext('2d');

//add to widget????

[RobertScheitlin__GISP]

Greg,

  I would personally use dojo dom-construct for the whole process:

var canvas = domConstruct.create("canvas",{ "width": 300, "height": 200, "style": "border: 2px solid"});
domConstruct.place(canvas, "example"); //Where example is a template element‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
if (!canvas.getContext) return;
var ctx = canvas.getContext('2d');‍‍‍‍‍‍‍‍‍‍‍‍

html template:

<div data-dojo-attach-point="example"></div>‍‍

[RobertScheitlin__GISP]

Greg,

   Did the code I provided answer your question?

[GregRieck]

Robert, my apologies for the delay, I was off yesterday and away from my office.

No, I'm getting an error Cannot read property 'appendChild' of null.

Here is my html:

<div data-dojo-attach-point="example">
Splice Point: <input id="txtName" type="text" style="font-weight:bold;border:none" readonly><br>
Location: <input id="txtLocation" type="text" style="font-weight:bold;border:none" readonly><br>
Address: <input id="txtAddress" type="text" style="font-weight:bold;border:none" readonly><br>
Address Notes: <input id="txtAddressNotes" style="font-weight:bold;border:none" readonly><br>
Manufacturer: <input id="txtManufacturer" style="font-weight:bold;border:none" readonly><br>
Part #: <input id="txtPartNo" type="text" style="font-weight:bold;border:none" readonly><br>
Splice Comments: <input id="txtSpliceComments" type="text" style="font-weight:bold;border:none" readonly><br>
</div>

and I add a reference to 'dojo/dom-construct'

Here is my JS:

var canvas = domConstruct.create("canvas", { "width": 300, "height": 200, "style": "border: 2px solid" });
domConstruct.place(canvas, "example"); //Where example is a template element
if (!canvas.getContext) return;
var ctx = canvas.getContext('2d');
ctx.lineWidth = 4;
ctx.strokeStyle = 'red';
ctx.fillRect(0, 0, canvas.width, canvas.height);

I have attached an image of what I'm trying to accomplish. I have this working in my desktop version using WPF. I'm trying to convert the concept to a web based solution. This represents a fiber optic network location where different fiber cables are spliced together. The span is a fiber cable the numbers 3-48 represent individual fibers numbered 3-48.

[RobertScheitlin__GISP]

Greg,

   Try modifying this line (for testing purposes)

var canvas = domConstruct.create("canvas"); //, { "width": 300, "height": 200, "style": "border: 2px solid" });‍

[GregRieck]

Same error, canvas is valid. The error is in the domConstruct.place(canvas, "example"); line of code. Is it having issues finding "example"? As you can see from my example image above I need to create three canvases. 

I previously had the canvas defined in the html. However, I need to be able to create "N" amount of canvas'. The number of canvases I will need to create depends on how many fiber cables are coming into the particular location, ie. "N" number of canvases. That's the reason for wanting to create them dynamically.

html canvas:

<canvas id="outer" name="OuterCanvas
   grid.row="1"
   background="#fffff0"
   mouseleftbuttondown="SpliceCanvas_MouseLeftButtonDown"
   mouseleftbuttonup="SpliceCanvas_MouseLeftButtonUp"
   mousemove="SpliceCanvas_MouseMove"
   mouseleave="OuterCanvas_MouseLeave"
   mouseenter="OuterCanvas_MouseEnter"
   sizechanged="OuterCanvas_SizeChanged">
</canvas>

[RobertScheitlin__GISP · Accepted solution]

Ahh, Sorry about that that line of code should be:

domConstruct.place(canvas, this.example);

[GregRieck]

Thanks Robert, I should of caught that too, no worries. It works correctly now. 

So, I was looking at the "place" on the domCreate it looks like I can create additional canvases and place them under the previous canvas. So inside a for loop create "N" canvases and place them "after" the previous one. I'm going to attempt that next.

Greg