About Codepen.io


Today I came across to a web site named codepen.io . It is a coding environment for web developers and web designers. Web developers can create their own codes to show other people and have their idea about their work, and also they can ask people questions while developing their web tools.

While browsing codepen.io web designing and creating new things intrigued me to it. And I started to create some shapes with css and javascript. I don’t have much experiment with both but google is always there to help us, isn’t it? In this article you are gonna learn how to draw polygons with javascript in codepen.io using canvas element.

If you haven’t signed up yet please handle it.

Here we go!

1) Make sure you have your HTML tab look like below:

2)  And your Javascript tab like this:

If you have done so far, you will have a polygon like this:

You can extend your work as you wish. For example I have made a map of Turkey with this method(it took a lot of time to define the coordinates but anyway it looks beautiful 🙂 ). It looks like this:


If you want to follow me on codepen please click here.

I hope you enjoyed this article.

See you later..

Leave a Reply

Your email address will not be published. Required fields are marked *