How do I draw a line?

Hi. The game engines I've used up till now all had a function such as DrawLine( x, y, x2, y2, color ), but I can't seem to find anything like that in the Construct3 documentation? Tried googling it, and the listings are all related to the event sheets.

Look into the Drawing Canvas plugin. You can use it as a blank surface onto which you can perform drawing commands.

construct.net/en/make-games/manuals/construct-3/plugin-reference/drawing-canvas

Ah thanks. I couldn't find any javascript code examples in that part of the documentation. But I think I figured it out and got it to draw a line with the following.

async function OnBeforeProjectStart(runtime)
{
	// Code to run just before 'On start of layout' on
	// the first layout. Loading has finished and initial
	// instances are created and available to use here.	
	runtime.addEventListener("tick", () => Tick(runtime));
	document.write(`<canvas id="myCanvas" width="578" height="200"></canvas>`);
	let myCanvas = document.querySelector('#myCanvas');
	// var canvas = document.getElementById("myCanvas");
	let context = myCanvas.getContext("2d");
	context.beginPath();
	context.moveTo(100, 150);
	context.lineTo(450, 50);
	context.stroke();
	
}

I suppose its a good thing you didn't want to add some text.

Is that not how it's done?

Yeah, no, he was talking about a C3 object Drawing Canvas, not the Html5 Canvas.

Link to its documentation above.

It should be much easier to use.

There's other ways using objects, which are also way easier.

I've followed the link; construct.net/en/make-games/manuals/construct-3/plugin-reference/drawing-canvas and read the full page several times, but it doesn't appear to give any examples of how the drawing canvas plugin is used with javascript.

I've tried assigning the first instance of the canvas to a variable, and seeing what methods it has available to it, but autocomplete just has a list of all construct 3 methods.

To try and explain what the difficulty is; in other engines have code examples of how the line is drawn. For example, the gamemaker documentation for drawing a line has an example as follows:

Example:

draw_set_colour(c_lime);

draw_line(50,50,150,50);

When I can see an example of something working in code, such as the above, I can understand it immediately. But the Construct documentation, linked doesn't seem to have any code examples.

I also checked the scripting reference part of the manual, specifically the drawing canvas section:

construct.net/en/make-games/manuals/construct-3/scripting/scripting-reference/plugin-interfaces/drawing-canvas

But again I can't find any examples of how the drawing canvas is used in code.

To give another example, if I want to draw a line with app game kit, and I look in the documentation it has:

Example:

DrawLine( x, y, x2, y2, red, green, blue )

But I've not been able to find in the documentation any code snippets showing an example of how the drawing canvas is supposed to be used via javascript. And when I search on google, all the results for drawing a line in construct are for event sheets.

Sorry to ask a noob question, I'm really new to Construct 3, but if I am looking in the wrong place, where do I look to see example code of a line being drawn via javascript with the Construct 3 canvas plugin?

Thanks in advance

Most likely they haven't added it yet.

These things tend to get done as needed.

Currently the scriping API of the Drawing Canvas does not support drawing to it using Javascript.

Is there any reason not to use events to do this? For your particular case there is an action to draw a line, so that should do it.

Are you also looking for other features asides from drawing lines which are not present?

If you don't need animation, then exposing the SVG object to scripting might work without having to add all the Drawing Canvas parts.

Then again there's the Html Element...

Currently the scriping API of the Drawing Canvas does not support drawing to it using Javascript.

Is there any reason not to use events to do this? For your particular case there is an action to draw a line, so that should do it.

Are you also looking for other features asides from drawing lines which are not present?

Ah thanks so much for the information. That explains it.

One reason I was looking for lines, was because I like to use lines like the graphical version of console.log, to help me figure out what I'm trying to do. I think for an equivalent example of part of what I was searching for, Unity has "Debug.DrawLine" (3D lines). So I was trying to figure out how to do the equivalent in Construct (in 2D) so that as I learned I would have lines to fall back on. It's my goal to learn both event sheets and javascript. Another reason I was trying to find the javascript way of doing it specifically is because I wrote a program in python/opengl that uses l-systems to draw fractal trees, and I thought porting it to javascript in construct would be fun.

Anyway, thanks for the information. I didn't realize it wasn't supported. I'll post it in the suggestions area and see if I can use the event sheet version in the meantime.

If you don't need animation, then exposing the SVG object to scripting might work without having to add all the Drawing Canvas parts.

Then again there's the Html Element...

That's not a bad idea, I have an SVG book somewhere too.