Canvas

by Anton

HTML

<canvas width="600" height="400"></canvas>

CSS

canvas {
    border: solid 1px darkgrey;
}

JavaScript

let canvas = document.querySelector("canvas");
let cx = canvas.getContext("2d");

drawPie(cx);

//cx.fillStyle = "red";
//cx.fillRect(10, 10, 100, 50);

/*cx.strokeStyle = "blue";
cx.strokeRect(5, 5, 50, 50);
cx.lineWidth = 5;
cx.strokeRect(20, 20, 30, 30);*/

/*cx.beginPath();
for (let y = 10; y < 100; y += 10) {
	cx.moveTo(10, y);
	cx.lineTo(90, y);
}
cx.stroke();*/

//cx.beginPath();

/*cx.moveTo(10, 90);
// control=(55,10) goal=(90,90)
cx.quadraticCurveTo(55, 10, 90, 90);
cx.lineTo(55, 10); // to control point
cx.closePath();*/

/*cx.moveTo(10, 90);
// control1=(10,10) control2=(90,10) goal=(50,90)
cx.bezierCurveTo(10, 10, 90, 10, 50, 90);
cx.lineTo(90, 10);
cx.lineTo(10, 10);
cx.closePath();*/

// center=(50,50) radius=40 angle=0 to 7
//cx.arc(50, 50, 40, 0, 7);
//cx.moveTo(190, 50);
// center=(150,50) radius=40 angle=0 to ½π
//cx.arc(150, 50, 40, 0, 0.5 * Math.PI);

//cx.stroke();

// Exercises:

// Zig-zag
(() => {
    cx.beginPath();
    let currY = 400;
    const width = 50;
    const deltaY = 5;
    cx.moveTo(0, currY);
    for(let i = 0; i < 6; i++) {
        currY -= deltaY;
        cx.lineTo(width, currY);
        currY -= deltaY;
        cx.lineTo(0, currY);
    }
    cx.stroke();
})();

// Spiral
(() => {
    cx.save();
    const maxR = 100;
    cx.translate(50 + maxR, 200 + maxR);
    cx.beginPath();
    cx.moveTo(0, 0);
    let currR = 0;
    let deltaR = 0.8;
    let currAngle = 0;
    let deltaAngle = Math.PI / 15;
    while(currR < maxR) {
        currAngle += deltaAngle;
        currR += deltaR;

        cx.lineTo(Math.cos(currAngle) * currR, -Math.sin(currAngle) * currR);
    }
    cx.stroke();
    cx.restore();
})();

// Star
(() => {
    cx.save();
    cx.fillStyle = "green";
    
    const r = 100;
    cx.translate(170 + r, 80 + r);
    
    cx.beginPath();
    cx.moveTo(r, 0);
    const deltaAngle = Math.PI / 4;
	
    for(let i = 1; i <= 8; i++) {
    	cx.bezierCurveTo(
        	0, 0, 
            0, 0, 
            Math.cos(i *...