CODEWITHSUNDEEP
javascriptmathgraphhtml5-canvas
Donic
Donic

Reputation: 11

Draw butterfly graph on html canvas using javascript

I'm trying to draw a graph in a shape of a butterfly on html canvas using javascript. Parametric equations of the graph are:

I have been trying but i can't figure it out. Thanks for your help :)

Upvotes: 1

Views: 722

Answers (1)

Lutz Lehmann
Lutz Lehmann

Reputation: 25992

Here is a minimal example of a Lissajous curve for drawing a parametrized 2D curve on a javascript canvas. You should be able to adapt this for your curve

// get the handles and info on the HTML elements 
var canvas = document.getElementById('Canvas');
var width = canvas.width;
var height = canvas.height;
var context = canvas.getContext('2d');

// construct a local coordinate system that is 
// slightly larger than [-1,1]x[-1,1]
context.translate(width/2, height/2);
context.scale(width/2.1, height/2.1);
context.lineWidth = 0.02;

// construct and draw the curve
context.beginPath();
context.moveTo(0,0);
for(var x = 0; x < 6*Math.PI; x += 0.05)
    context.lineTo(Math.sin(3*x),Math.sin(4*x));
context.stroke();
<canvas id="Canvas" width = "200" height = "200" />

Upvotes: 1

Related Questions