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.

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.

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

Is that not how it's done?

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();
	
}

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.

I just bought Construct and really enjoying all the things this engine can do. I'm new to construct and javascript, but excited to learn. So far I've dabbled in a bit of procedural generation using event sheets and having a lot of fun!

The engine I used previously (app game kit) had drawing functions (line, ellipse, box). But I can't seem to find anything similar in the Construct 3 Javascript documentation.

I see there's a canvas available for javascript that I can use to push pixels to an array of pixel data, so that's good, worse case scenario I can figure out something with that.

I also noticed there's a bunch of line and shape drawing tools accessible through event sheets.

I was just wondering if there was something in between these two extremes that enabled simple line drawing in construct using javascript. I don't really need anything fancy, just something to draw lines for the purpose of visualising whatever I'm doing in my code.

Thanks in advance!

Thanks very much for the reply. Glad to hear Javascript is still included!

Hi, I was thinking of purchasing Construct 3, now that it has scripting, but then I read in a blog post from last year that in order to maintain Construct as primarily an event sheet based tool there would be some increases in prices.

I just wanted to confirm if the current price includes scripting and when are the increases happening? Also, come next year when it is time to renew, would a break in subscription result in it renewing at the new higher price with Javascript as an extra cost? (essentially locking me into keeping the subscription running at all times even times when I may not have time to use Construct) lest Javascript become an extra cost.)