canvas fun?

Canvas Slide Transcript.js

// Transcribe of the code from http://www.slideshare.net/Dmitry.Baranovskiy/canvas-2195590
var ctx = el.getContext('2d');

ctx.save();
ctx.restore();
ctx.scale(w, h);
ctx.rotate(angle);
ctx.translate(x, y);
ctx.transform(m11, m12, m21, m22, dx, dy);
ctx.setTransform(m11, m12, m21, m22, dx, dy);

ctx.globalAlpha = alpha; // 0-1
ctx.globalCompositeOperation = op; // xor

ctx.strokeStyle = hex;
ctx.fillStyle = hex;

var gradient = ctx.createLinearGradient(x1, y1, x2, y2);
var gradient = ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);
gradient.addColorStop(0 / 6, 'red');
ctx.fillStyle = gradient;

ctx.lineWidth = px;
ctx.lineCap = 'round';
ctx.lineJoin = 'bevel';
ctx.miterLimit = 5;

ctx.shadowColor = hex;
ctx.shadowOffsetX = x;
ctx.shadowOffsetY = y;
ctx.shadowBlur = 5;

// Primitivies
ctx.clearRect(x, y, w, h);
ctx.fillRect(x, y, w, h);
ctx.strokeRect(w, y, w, h);

// Paths
ctx.beginPath();
ctx.closePath();
ctx.moveTo(x, y);
ctx.lineTo(x, y);
ctx.quadraticCurveTo(cpx, cpy, x, y);
ctx.bezierCurveTo(c1x, c1y, c2x, c2y, x, y);
ctx.arcTo(x1, y1, x2, y2, radius);
ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise);
ctx.rect(x, y, w, h);

ctx.fill();
ctx.stroke();
ctx.clip();
ctx.isPointInPath(x, y);

// Text
ctx.font = 'regular font string';
ctx.textAlign = 'center'; // left, right, center, justify
ctx.textBaseLine = 'middle';
ctx.fillText(text, x, y);
ctx.strokeText(text, x, y, something?);

var metrics = ctx.measureText('Test this text');
console.log(metrics); // has attributes like width

// Images
ctx.drawImage(image, sx, sy, sw, sh, x, y, w, h);

var data = ctx.createImageData(x, y);
var data = ctx.createImageData(oldData);
var data = ctx.getImageData(x, y, w, h);
ctx.putImageData(data, dx, dy, x, y, w, h);

var data = {
	width: w,
	height: h,
	data : []
};