Switch to desktop version  
Draw a circle on Java Script by using ViewOn - Printable Version

+- Ewon Technical Forum (https://techforum.ewon.biz)
+-- Forum: Development (https://techforum.ewon.biz/forum-50.html)
+--- Forum: Custom Web Pages/viewON/Talk2M Visualization (https://techforum.ewon.biz/forum-55.html)
+--- Thread: Draw a circle on Java Script by using ViewOn (/thread-937.html)

Draw a circle on Java Script by using ViewOn - A_P_G - 05-06-2019

Hello,

 
I am using for my HTML page the ViewOn Software.
 
I want to draw a few circles using the JavaScript Section of ViewOn which will depend on two variables for the position of each circle.
 
Could someone help me with this issue, I have tried but always unsuccessful .


Thank you!
Kind Regards,

André Gonçalves

RE: Draw a circle on Java Script by using ViewOn - Ludo - 11-06-2019

Hey André,

Could you maybe share the viewON project with us?
And add extra information? Like what are the values, how do you want the circles to position, ... ?

RE: Draw a circle on Java Script by using ViewOn - A_P_G - 13-06-2019

Hello Ludo,

In ViewOn Software I inserted a new View and on the same View I went to "Action" -> "New" -> "Java Script Sections" and added a new "Java Script Section" and wrote the following code:

var c = document.getElementById("Circle1");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

I was expecting with this code to draw a circle on the View but it didn't draw. On ViewOn I didn't get any errors.
I don't want to draw manually because I have draw many circles depending on a Ewon variable which will give me a number.

Thank you

RE: Draw a circle on Java Script by using ViewOn - Ludo - 19-06-2019

Hi André,

Did you insert a < canvas> tag as well ?

What is your document.getElementById("Circle1") referring to? Do you have the relevant tag in your view?
You might need to create it as well through JS.

Your code is pure JS so should work without any trouble (https://jsfiddle.net/xn4o71qy/)

RE: Draw a circle on Java Script by using ViewOn - LewisH304 - 30-10-2019

Try this code!

JavaScript Code:
function draw()
{
var canvas = document.getElementById('circle');
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
var X = canvas.width / 2;
var Y = canvas.height / 2;
var R = 45;
ctx.beginPath();
ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
ctx.lineWidth = 3;
ctx.strokeStyle = '#FF0000';
ctx.stroke();
}
}
Hope this helps!
Regards,
Lewis