Draw On Canvas

Video Transcript

You can use javascript to draw on a canvas in the middle of a node like in the Bezier Curve node. To enable this check the “Show HTML Canvas” check box. The canvas will be the width of the node, and whatever height you set in the text box that shows up when the option is checked. When this option is enabled the Draw Canvas update condition is added to the drop down list. This block of javascript code has access to the context and canvas objects. There is a lot of information available online about how to draw with these objects, all of which should work on the node. The Bezier Curve node is a good example of what you can do with it. This block of code has access to node inputs like any other block of code, just write Input, underscore, and the name of the input without spaces. The canvas does not automatically re-draw when the node refreshes. To force the HTML Canvas to redraw you must call the Draw function in any update code block.