HTML5 Canvas Line Tutorial

Published on October 31st 2010 by Eric Rowell

To draw a line using HTML5 Canvas, we can use the beginPath(), moveTo(), lineTo(), and stroke() methods.

First, we can use the beginPath() method to declare that we are about to draw a new path. Next, we can use the moveTo() method to position the context point (i.e. drawing cursor), and then use the lineTo() method to draw a straight line from the starting position to a new position. Finally, to make the line visible, we can apply a stroke to the line using stroke(). Unless otherwise specified, the stroke color is defaulted to black.

Live Demo and Editor new window

Author Bio

Eric Rowell

Eric Rowell 

Eric Rowell is the creator of KineticJS, the founder of MeteorCharts, the founder and chief editor of Html5CanvasTutorials.com, the author of HTML5 Canvas Cookbook, and a senior web developer at LinkedIn. He really likes robots, and dreams of one day building his own Megazord.

Submit an Article

Hi there! Are you looking to promote your website or boost your brand? With nearly one million unique page views per month, HTML5 Canvas Tutorials is a great place to submit HTML5 canvas related articles to help meet your goals.

comments powered by Disqus