How to draw polygons on an HTML5 canvas?

by

Create a path with moveTo and lineTo (live demo):

var ctx = canvas.getContext('2d');
ctx.fillStyle="#f00";
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100,50);
ctx.lineTo(50, 100);
ctx.lineTo(0, 90);
ctx.closePath();
ctx.fill();

More Related Contents:

  1. HTML5 Canvas Resize (Downscale) Image High Quality?
  2. Simulation background-size: cover in canvas
  3. How to save image from canvas with CSS filters
  4. make canvas as wide and as high as parent
  5. Is there a way to curve / arc text using CSS3 / Canvas
  6. How to style canvas elements with CSS
  7. How to create a translucent in React Native?
  8. How to get an HTML element’s style values in javascript?
  9. Resize image with javascript canvas (smoothly)
  10. Refresh/reload the content in Div using jquery/ajax
  11. Change :hover CSS properties with JavaScript
  12. Animate element to auto height with jQuery
  13. Prevent zoom cross-browser
  14. Convert SVG to PNG with applied images as background to svg elements
  15. How can you figure out the highest z-index in your document?
  16. How to ensure a form field is submitted when it is disabled?
  17. Capture frames from video with HTML5 and JavaScript
  18. How to auto-scroll to end of div when data is added? [duplicate]
  19. Disable dragging an image from an HTML page
  20. javascript change background color on click [closed]
  21. Use a new CSS file to override current website’s
  22. CSS: Change parent on focus of child
  23. Possible to disable @media queries or force a resolution? Reason: Allow an iphone to see the desktop site?
  24. Check if element is between 30% and 60% of the viewport
  25. Fade background image in and out with jQuery?
  26. DIV Vertical Scroll bar on left
  27. Convert dropdown to selection boxes with color and trigger drop down action
  28. CSS /JS to prevent dragging of ghost image?
  29. Google’s Imageless Buttons
  30. How to apply background-color to a selected option?

Leave a Comment