<canvas id="a" width="200" height="200"> </canvas>
<script>
var canv = document.getElementById("a");
var ctx = canv.getContext("2d");
ctx.fillRect(50, 25, 150, 100);
</script>
Context – API для рисования
2d – стандартно (система координат – top left)
3d – не во всех браузерах (WebGL)
Поддержка: IE 7+, FF 3+, Chrome 3+, Opera 10+
Методы рисования
ctx.fillStyle – стиль заполнения (цвет)
ctx.strokeStyle – стиль росчерка (цвет)
ctx.font – стиль шрифта ctx.strokeRect(x, y, width, height)
ctx.fillRect(x, y, width, height)
ctx.moveTo(x, y) – переместить перо в точку
ctx.lineTo(x, y) – провести линию в точку
ctx.stroke() - вывести линию с нужным стилем
ctx.fillText("phrase", x, y) – вывод текста
Градиенты и изображения
grd = ctx.createLinearGradient(x0, y0, x1, y1);
grd.addColorStop(0, "black");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
img = Image();
img.src = "images/cat.jpg";
img.onload = function() {
ctx.drawImage(img, x, y, width, height);
};