+ 2

How can we draw any curve in HTML?

14th Jun 2018, 5:46 PM

Suprabhat kumar

8 Answers

+ 3

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.moveTo(20,20); ctx.bezierCurveTo(20,100,200,100,200,20); ctx.stroke(); https://stackoverflow.com/questions/24381342/how-to-draw-a-gaussian-curve-using-canvas

14th Jun 2018, 5:52 PM

Alexander Sokolov

+ 2

vaibhav i dont think we can draw any curve using path tag

14th Jun 2018, 5:54 PM

Suprabhat kumar

+ 2

Error is showing in JS code

14th Jun 2018, 6:19 PM

Suprabhat kumar

+ 2

https://code.sololearn.com/WxC4pyrQahu9/?ref=app

15th Jun 2018, 1:24 AM

Calviղ

+ 2

this is the coding of a house and i wnt to make a path using JS code but there is an error "c.getContext is not a function " this is the error how will it b removed??

15th Jun 2018, 3:52 AM

Suprabhat kumar

+ 1

you can use path tag

14th Jun 2018, 5:51 PM

Vaibhav Tandon

+ 1

ctx.bezierCurveTo(100,50,50,100,100,150); ctx.quadraticCurveTo(100,50,200,100,100,150)

14th Jun 2018, 9:48 PM

Dlite

+ 1

<!DOCTYPE html> <html> </head> <body> <svg width="100%" height="480"> <path d="M 45 120 L70 80 L250 80 L270 120 L250 120 L250 200 L55 200 L55 120 L45 120 L 70 80 L100 120 L50 120 L250 120 L90 120 L90 200 L80 190 L80 130 L90 120 L55 120 L65 130 L65 190 L55 200 L55 120 Z" fill=none stroke=green /> <path d="M 120 150 L150 150 L150 175 L120 175 L120 150 L130 150 L130 175 L 140 175 L140 150 L150 150 L 150 167 L120 167 L120 158 L150 158" fill=blue stroke=green /> <path d="M 180 150 L210 150 L210 175 L180 175 L180 150 L190 150 L190 175 L 200 175 L200 150 L210 150 L210 158 L180 158 L210 158 L 210 167 L180 167" fill=blue stroke=green /> <path d="M 130 152 L140 156 L140 158 L130 158 Z" fill=blue stroke=green /> <path d="M 55 120 L65 130 L65 190 L55 200 " fill=brown stroke=red /> <path d="M 90 120 L80 130 L80 190 L80 190 L90 200"

15th Jun 2018, 3:51 AM

Suprabhat kumar