Render a Heart (Worthy)

From placing pixels on the screen, let's move on to a couple of new Canvas concepts.

All of the dimensions (x, y, and radius) are fractions of the screen dimensions so that our heart will look like a heart as long as the canvas parameter is even.

We'll use stroke() often, and only have to set the color once, so we do it early in the code.

c.beginPath() is what we do before starting a path to move to the correct x/y rather than 0/0.

Canvas arcs accept (x, y, radius, startCircle, endCircle, clockWise) as parameters.

• We pass in x's and y's that are simple
• We calculated radius earlier that is (1/2)*(x2-x1) so they meet each other evenly
• Starting at 0, we work clockwise(true) toward Math.PI to create a full arc (Math.PI*2 makes a circle)

1)moveTo() and 2)lineTo() is the same as 1)place canvas stroke/fill start at x/y and 2)stroke/fill toward given x/y

Then we finally apply the "stroke", which actually applies the arcs and lines to the canvas.

function drawShapes() {

radius=w/6;

c.strokeStyle="red";

c.beginPath();

c.arc(w/3,h/3, radius, 0, Math.PI, true);

c.moveTo(w*(2/3)+radius, h/3);

c.arc(w*(2/3), h/3, radius, 0, Math.PI, true);

c.moveTo(w/3-radius,h/3);

c.lineTo(w/2,h*(3/4));

c.lineTo(w*(2/3)+radius, h/3);

c.stroke();

}

If you need a radian chart, examples, or any other quick references, www.mathwords.com is a great tool to use and I whole-heartedly endorse www.coolmath.com for learning concepts.