Draw and plot Square dynamically Using HTML canvas

Question

I need to draw this diagram given below using html canvas.Can anyone help me.

rahulserver actually i dont have idea to plot the data inside the triangle — Inder Singh, Jul 15 '13 at 10:30
The data you have I guess denotes a kind of relationship between variables.So get an equation for the above triangle and put it in javascript.You can visit http://www.w3schools.com/html/html5_canvas.asp for tutorial on HTML canvas. — rahulserver, Jul 15 '13 at 10:45
What does your data look like? You might look at d3 (data-driven-design): http://d3js.org/ Without knowing your data, it looks like you're needing a combination of a pack layout with Voronoi spacing. Maybe even a tree layout. Anyway, too little info provided to give you a real answer, but you have an interesting diagram there! — markE, Jul 15 '13 at 15:46

gloo · Accepted Answer · 2013-07-16T13:55:06.330

0

First get access to the canvas:

var can=document.getElementById('canvas1')

Now you need a context to perform the drawing functions:

var pen=can.getContext('2d')

To draw a line do the following:

pen.beginPath()
pen.moveTo(0,0)
pen.lineTo(50,50)
pen.closePath()
pen.strokeStyle=rgb(255,0,0)
pen.stroke()

To fill a path (like a triangle) do the following:

pen.beginPath()
pen.moveTo(0,0)
pen.lineTo(50,50)
pen.lineTo(0,50)
pen.closePath()
pen.fillStyle=rgb(255,0,0)
pen.fill()

edited Jul 16 '13 at 13:55

answered Jul 15 '13 at 16:07

gloo

gloo this works good but can you help me to plot it inside the triangle – Inder Singh Jul 16 '13 at 05:19
Its kind of duval triangle (http://www.docstoc.com/docs/118499102/DGA-Duval-triangle) – Inder Singh Jul 16 '13 at 05:26

1 Answers1