Hello Canvas

HTML is a markup language designed to have browsers render a web page in a corresponding way. With HTML5 a canvas-element was introduced. That element allows direct manipulation of 2D image data. In other words it creates a image where you can manipulate the pixels and draw on. To be more precise, the 2D context of the canvas element allows that. There is also the WebGL context, that we will see later. In this exercise we will use the 2D context, which is more convenient for drawing 2D graphics.

In the following link you can find a simple base code for the task at hand:
https://cglearn.codelight.eu/files/course/1/tasks/HelloCanvas.zip

The task itself is to draw an equilateral triangle in a specific position. In the base code you can find a function drawTriangle(position) that is unfinished. The task is to finish it. The final result should look something like the image on the right.

You can choose the size and color of the triangle yourself. Main requirement is that it is a equilateral (all of the sides have the same length) and the center of the triangle* is positioned at the coordinates given to the function.

* Center of a triangle is generally an ambiguous term. But for an equilateral triangle most of the common known centers fall to the same point. See: https://en.wikipedia.org/wiki/Triangle_center#Examples
;