Canvas

How to init a canvas?
// In HTML:
<canvas id="Canvas" width="1000" height="1000">
<!-- Add warning for non-supporting browsers -->
</canvas>
// In JS:
var c = document.getElementById("Canvas");
var ctx = c.getContext("2d");
How to draw a rectangle?
ctx.fillStyle = "#000000"; // Style
ctx.fillRect(10, 10, 50, 50); // x, y, width, height
How to draw a border?
ctx.lineWidth = "6"; // Line Width
ctx.strokeStyle = "red"; // Style
ctx.rect(5, 5, 300, 150); // x, y, width, height
ctx.stroke(); // Draw
How to draw a line?
ctx.beginPath(); // Use path to draw lines
ctx.moveTo(0, 0); // Mark start position
ctx.lineTo(150, 50); // Draw a straigh line to that position
ctx.lineTo(50, 50);
ctx.lineTo(200, 100);
ctx.stroke(); // Actually draw that line
How to draw a circle?
ctx.beginPath(); // Use path
ctx.arc(50, 50, 40, 0, 2*Math.PI, false); // x, y, r, startAngle, endAngle, ccw
// Note: Angles are in radians, not in degrees!
// radius = degrees * Math.PI / 180
ctx.stroke(); // Draw
How to print text in canvas?
ctx.font = "italic 30px Arial"; // Font
ctx.fillText("Hello World", 10, 50); // Text, x, y
How to clear the canvas?
ctx.clearRect(0, 0, 50, 50); // x, y, w, h

What is a State in canvas?
Range of properties that have been set for canvas context at a particular moment in time.
Note: Not current path or bitmap display.
Saved in a Stack: LIFO.
Functions:
ctx.save(); // Save state
ctx.restore(); // Restore last state saved
How to rotate canvas?
// Must be next to init
ctx.rotate(30 * Math.PI / 180); // Rotate 30 degrees.
How to scale canvas?
// Must be next to init
ctx.scale(2, 2); // Multiplier x, Multiplier y
How to translate canvas?
// Must be next to init
ctx.translate(50, 50); // x, y
How to change composites?
ctx.globalCompositeOperation="source-over";
ctx.globalCompositeOperation="destination-over";
How to draw and crop an image?
ctx.drawImage(“img.jpg”,0,0,100,100,25,25,75,75);
// image url, source x, source y, source w, source h, destination x, destination y, destination w, destination h
How to use radical gradient effect?
Take half-circle as an example.

// Create gradient
var grd=ctx.createRadialGradient(50, 50, 50, 50, 50, 10);
// x0, y0, r0, x1, y1, r1
// 0: Start position; 1: End position
grd.addColorStop(0, "red"); // stop, color
// Stop: A value between 0.0 and 1.0 that represents the position between start and end in a gradient
grd.addColorStop(0.5, "yellow");
grd.addColorStop(1, "blue");
// Draw a half-circle
ctx.beginPath();
ctx.arc(50, 50, 40, 0, 1*Math.PI, true);
ctx.fillStyle=grd; // IMPORTANT! Change fill style to grd, otherwise grd does not work.
ctx.fill();
How to animate?
window.onload = function() {
var c = document.getElementById("example10");
window.ctx = c.getContext("2d");
animate();
}

// Animate
function animate() {
// Always clear the canvas after drawing each frame
window.ctx.clearRect(0, 0, 100, 100);
// Draw here, including conditionals
ctx.beginPath();
ctx.arc(50,50,40,0,1*Math.PI, true);
ctx.fillStyle = "red";
ctx.fill();
ctx.translate(2, 0);
// This will run animate() every 33 ms
setTimeout(animate, 33);
}