9th Oct 2017, 8:25 AM
Janu Fouche
Janu Fouche - avatar
4 Answers
+ 16
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <canvas id = "id_canvas"></canvas> </body> <script> var v_canvas = document.getElementById("id_canvas"); v_canvas.width = window.innerWidth; v_canvas.height = window.innerHeight; var v_c = v_canvas.getContext("2d"); v_c.fillStyle = "#0000FF"; v_c.fillRect(20 ,20 , 100, 100); v_c.fillStyle = "#FF0000"; v_c.fillRect(200 ,10 , 100, 100); v_c.fillStyle = "#00FF00" v_c.fillRect(10 ,200 , 100, 100); //lines v_c.beginPath() v_c.moveTo(300,300); v_c.lineTo(150, 100); v_c.strokeStyle = "#FF00FF"; v_c.stroke(); //arc v_c.beginPath(); v_c.arc(200, 300, 30, 0, 5, Math.PI * 1,Math.PI * 2, true ); v_c.strokeStyle = "#FF0000"; v_c.stroke(); </script> </html>
9th Oct 2017, 8:31 AM
Nikky Amresh
Nikky Amresh - avatar
+ 14
U have to define starting point and ending point and radius too...
9th Oct 2017, 8:32 AM
Nikky Amresh
Nikky Amresh - avatar
+ 4
https://chat.whatsapp.com/JNgRjptqVj12bjWMtKZrDv Join this whatsapp group for any type of programming doubts
10th Oct 2017, 1:02 PM
Nikky Amresh
Nikky Amresh - avatar
+ 1
thx
10th Oct 2017, 7:17 AM
Janu Fouche
Janu Fouche - avatar