Web design: y=sinx from jsDraw2DX

The tutor shows how to produce a graph of sinx on a web page using jsDraw2DX.

I’ve mentioned jsDraw2DX in a couple of posts (here and here).

For producing a graph of sinx, the basic construct is

var singraph = new jxFunctionGraph(‘Asin(b(x-c)) + d’, x_start, x_end, thePen);

Above, A,b,c,and d are numbers to customize the sin graph. x_start and x_end are the start and end x-coordinates of the graph. thePen is an instance of jxPen, used to draw curves and outlines. graphics_div is the <div> element in which the graphics will be displayed.

Since webpage coordinates often start from the upper corner, then go across and down (rather than up), you may find you need the parameter A to be negative for the graph to look as expected. For instance, y=-sinx might be needed to produce a graph that looks like y=sinx should.

Here’s an example:

The actual function to produce the graph above in jsDraw2DX:




Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.

Web Design: graphics: Outlined Text with jsDraw2DX

The tutor continues about the graphics library jsDraw2DX: how to use it for outlined text.

To accomplish the effect above one might proceed something like this:

<div id=”grph” style=”position:relative; height:330px;width:410px; background-color:navy; border-style:solid;border-color:brown; border-width:2px”></div>
<script src=”dir_where_jsDraw2DX_resides/jsDraw2DX.js”></script>
var gr0=new jxGraphics(document.getElementById(“grph”));

var pen0=new jxPen(new jxColor(‘white’),’1px’);
var brush0=new jxBrush(new jxColor(‘brown’));
var font0=new jxFont(‘verdana’);

var text0=new jxText(new jxPoint(75,88), “jsDraw2DX”, font0, pen0,brush0,12);

var text1=new jxText(new jxPoint(35,188), “Outlined Text”, font0, pen0,brush0,12);

To use jsDraw2DX, it needs to reside one your system. From the jsDraw2DX website it can be downloaded.


Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.