Маленькая шпоргалка по canvas

Canvas

//инициализация
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

//размеры канваса
w = canvas.width;
h = canvas.height;

//масштаб, например в 2 раза больше
ctx.scale(2,2)
//=-=-=-=-=-=-=-=-=--=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-=-=-=-=-=-=
//очистить прямоугольник (прозрачен)
ctx.clearRect(0, 0, width, height);
//=-=-=-=-=-=-=-=-=--=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-=-=-=-=-=-=
//цвет заливки
ctx.fillStyle = "00ff00"

//залить прямоугольник
ctx.fillRect(x, y, width, height);
//=-=-=-=-=-=-=-=-=--=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-=-=-=-=-=-=
//цвет линии
ctx.strokeStyle = '#ff0000';

//ширина линии
ctx.lineWidth = 4;

//обвести прямоугольник (не заполняет внутреннюю часть)
ctx.strokeRect(x, y, width, height);
//=-=-=-=-=-=-=-=-=--=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-=-=-=-=-=-=
//произвольная фигура
//начать путь
ctx.beginPath();

//сделать окружность
//ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
//center x,y
//radius
//starting angle, in radians (0 is at the 3 o'clock position of the arc's circle)
//nding angle, in radians
ctx.arc(75, 75, 10, 0, Math.PI*2, true);

//перейти к точке (не проводит линию)
ctx.moveTo(x, y);

//проводим линию от предыдущей точки к новым x и y
ctx.lineTo(x, y);

//закончить путь
ctx.closePath();

//залить фигуру
ctx.fill();

//обвести фигуру
ctx.stroke();
//=-=-=-=-=-=-=-=-=--=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-=-=-=-=-=-=
//линейный градиент (начальные и конечные x,y)
var gradient = ctx.createLinearGradient(sx, sy, dx, dy);

//радиальный градиент, x,y,radius внутренней и внешней окружности
var gradient2 = ctx.createRadialGradient(sx, sy, sr, dx, dy, dr);

//вета (значения от 0 (начало градиента) до 1 (конец градиента))
gradient.addColorStop(0, '#f00');
gradient.addColorStop(0.5, '#ff0');
gradient.addColorStop(1, '#00f');
//=-=-=-=-=-=-=-=-=--=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-=-=-=-=-=-=
//установка шрифта
context.font = 'italic 30px sans-serif';

//???
context.textBaseline = 'top';

//залитый текст (текст, координаты)
context.fillText ('Hello world!', x, y);

//обводной текст (текст, координаты)
context.strokeText('Hello world!', x, y);

//=-=-=-=-=-=-=-=-=--=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-=-=-=-=-=-=
var img = new Image();
img.src = "images/file.png";
img.onload = function() {
    context.drawImage(img, x, y); //так же можно добавить width,height как 4 и 5 параметры
};

//=-=-=-=-=-=-=-=-=--=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-=-=-=-=-=-=
/*
Если вы рисуете однопиксельную линию между целыми координатами, она будет перекрывать противоположные стороны пиксельного квадрата, в результате будет нарисована ширина два пиксела. Чтобы нарисовать  линию шириной только в один пиксел, необходимо сместить координаты на 0.5 перпендикулярно к направлению линии.
http://htmlbook.ru/html5/canvas
*/
//=-=-=-=-=-=-=-=-=--=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-=-=-=-=-=-=

Спасибо, как раз делаю графплоттер)