HTML

Drawing a circle

First of all we create a simple HTML5 canvas element with (your self-defined) width and height values.

canvasHTML

In the next step we use javascript to draw  a circle into our canvas element. With the arc-method of the context we define the circle position (x,y) within the canvas, the circle radius, starting angle, ending angle, a boolean parameter for clockwise or  anticlockwise. In this example the circle gets a red background-color.

jsDrawCircle

Below you can see the result. I colorized the canvas, so you can see the position within the canvas element.

circlered

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s