Hi, Is it possible to draw a line on the screen using JavaScript in Storyline 360?
I'm working on a statistics example where I want to draw a regression line on a scatterplot. The learner can add a new data point and see the regression line change.
I've found the following Javascript, but I don't know how to make it work in Storyline 360.
<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.moveTo(0, 60); ctx.lineTo(300, 60); ctx.stroke(); </script>
Add it to a shape on Storylines screen with a specified accessibility name so its easy selectable.
Then you can get the Canvas by its Id as in your code... and draw lines, shapes, triangles and anyother supported Canvas methods on it as seen on my sample.
I do have a question though. When I change the "ctx.lineTo()" numbers, it does not seem to increase the width of the line. It appears as if it is getting masked out.
So, for example, here is what the line looks with "ctx.lineTo(300, 120)". (See line01.jpg)
However, if i change "ctx.lineTo(1200,120)", it changes then angle of the line, but the width is the same. (See line02.jpg)
Do you have any insight into why this is happening?
ctx.lineWidth = 25 obviously is the line width. However when changing that keep in mind the line has to be created first...then the properties can be changed. If you just change the code as is, you might have to click twice to see it happen.
Sorry, there was a bit of confusion on what I was asking. "ctx.lineWidth" effects how thick the line is obviously. I was talking about where the line ends. The total size of the line.
If I understand the code correctly, "ctx.moveto" indicates the starting point of the line, and "ctx.lineto" will be the point to where the line will draw to. In my second example above, I changed the "x" position of the line to "ctx.lineto(1200, 120)" (much longer than the width of the slide which is 960). However it still travels the same distance as the first example, which is set to "ctx.lineto(300, 120)".
Apologies for any confusion in my original question. Thanks!
The default values when creating a Canvas by script are small ( 200x200 or some ). Setting those values at creation to fullscreen size and it will show lines as long as you want.
Then you can do whatever wanted. However as you can see in my sample the 'px'- values of Storyline for sure mismatch with Canvas units. As they are different. So your best bet probably is a calculation or using percentages.
9 Replies
Storyline doesnot has a Canvas element in its HTML by default. So first thing you need to do is add a Canvas element to Storyline.
In my sample i add that at the start of the timeline.
https://360.articulate.com/review/content/cdd63deb-d937-4a20-84db-16144bdbf588/review
Add it to a shape on Storylines screen with a specified accessibility name so its easy selectable.
Then you can get the Canvas by its Id as in your code... and draw lines, shapes, triangles and anyother supported Canvas methods on it as seen on my sample.
Adding the basic Storyline for that.
Thanks so much for posting this example!
I do have a question though. When I change the "ctx.lineTo()" numbers, it does not seem to increase the width of the line. It appears as if it is getting masked out.
So, for example, here is what the line looks with "ctx.lineTo(300, 120)". (See line01.jpg)
However, if i change "ctx.lineTo(1200,120)", it changes then angle of the line, but the width is the same. (See line02.jpg)
Do you have any insight into why this is happening?
ctx.lineWidth = 25 obviously is the line width.
However when changing that keep in mind the line has to be created first...then the properties can be changed. If you just change the code as is, you might have to click twice to see it happen.
Sorry, there was a bit of confusion on what I was asking. "ctx.lineWidth" effects how thick the line is obviously. I was talking about where the line ends. The total size of the line.
If I understand the code correctly, "ctx.moveto" indicates the starting point of the line, and "ctx.lineto" will be the point to where the line will draw to. In my second example above, I changed the "x" position of the line to "ctx.lineto(1200, 120)" (much longer than the width of the slide which is 960). However it still travels the same distance as the first example, which is set to "ctx.lineto(300, 120)".
Apologies for any confusion in my original question. Thanks!
Info about Canvas and drawing on it is to be found abundantly on the web.
Like this..
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/moveTo
The default values when creating a Canvas by script are small ( 200x200 or some ).
Setting those values at creation to fullscreen size and it will show lines as long as you want.
canv.width = window.innerWidth;
canv.height = window.innerHeight;
Then you can do whatever wanted. However as you can see in my sample the 'px'- values of Storyline for sure mismatch with Canvas units. As they are different. So your best bet probably is a calculation or using percentages.
Awesome! Thanks so much for the info!
I'm trying to plot a shape using a canvas but I can't seem to account for the scale of the window. Any thoughts?
Thats the Modern Player scaling issue i guess. Will check and see..
Update, I figured out a formula that scales the modern player pretty well. I imagine there's a more elegant way but this worked for me.