i having trouble drawing triangle on canvas. triangle: equilateral triangle 2 points on x-axis. thinking: start in bottom right corner, move next point, , move last point in lower left. here have:
<!doctype html> <html lang="en"> <head> <meta charset= "utf-8"> <script type="text/javascript"> function draw() { var canvas = document.getelementbyid('canvas'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); var swidth = screen.width; var sheight = screen.height; var path=new path2d(); path.moveto((swidth/2)+50,sheight/2); path.lineto((swidth/2),(sheight/2)-50); path.lineto((swidth/2)-50,sheight/2); ctx.fill(path); } } </script> </head> <body onload="draw();"> <div align = "center"> <canvas id = "canvas"> </canvas> </div> </body> </html> nothing gets drawn. read: https://developer.mozilla.org/en-us/docs/web/api/canvas_api/tutorial/drawing_shapes, i'm not sure messed up.
you need give size canvas. either css, html or in javascript
here snippet works :
function draw() { var canvas = document.getelementbyid('canvas'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); var swidth = canvas.width; var sheight = canvas.height; var path=new path2d(); path.moveto((swidth/2)+50,sheight/2); path.lineto((swidth/2),(sheight/2)-50); path.lineto((swidth/2)-50,sheight/2); ctx.fill(path); } } draw();<!doctype html> <html lang="en"> <head> <meta charset= "utf-8"> <style>canvas { width: 200px; height: 200px; border: 1px solid red; }</style> </head> <body> <canvas id="canvas"> </canvas> </body> </html>
Comments
Post a Comment