Первые шаги с Canvas

Canvas - это HTML-тег для графики на интерактивной поверхности рисования. Его использование очень просто.

Действительно, для использования Canvas нужно всего три вещи:

HTML-страница с HTML-документом 5.
Маяк «canvas».
Немного кода JavaScript

1) HTML-документ 5

Необходимо указать DOCTYPE в первой строке страницы, которая для HTML 5 имеет следующую форму:

<!DOCTYPE html>

2) Тег canvas

Тег должен иметь атрибут «id», чтобы на него можно было ссылаться в коде JavaScript:

<canvas id="moncanevas" width="400" height="300"></canvas>

Этот тег не имеет HTML-содержимого, за исключением сообщения, которое отображается только в старых браузерах, не признающих HTML 5. Например:

<canvas id="moncanevas" width="400" height="300">
  Canvas n'est pas implémenté dans ce navigateur.
</canvas>

3) Сценарий в JavaScript

Содержимое <canvas> динамически задается кодом JavaScript. Например, можно показать синий прямоугольник.

canvas = document.getElementById("moncanevas"); 
if (canvas.getContext)
{    
    context = canvas.getContext('2d'); 
}
function rectangle()
{
   context.fillRect(100,0,80,80);     
}

Сценарий будет запущен с помощью события onload, связанного с тегом <body> или элементом окна.
В этом примере создается функция setCanvas () и она присваивается onload:

function setCanvas()
{
  var canvas = document.getElementById("moncanevas"); 
  var context = canvas.getContext("2d");
  context.fillStyle = "blue"   
  context.fillRect(100,0,200,100);
}
window.onload=setCanvas;

Атрибут fillStyle присваивает контексту текущий цвет, которым будут рисованные объекты. Ему можно присвоить имя цвета, код rgb или rgba.
Метод fillRect показывает прямоугольник, заполненный текущим цветом, а для параметров - x, y, ширина, высота.

Демонстрация (Firefox, Chrome, Edge, Safari, Opera):

Список функций графики API Canvas

Канвас Элемент. Спецификации W3C.

Посмотрите на эту демонстрацию

Зумкильт. В том же духе, что и бесконечный Oz, который сделан во Flash, но на этот раз в JavaScript в Canvas, бесконечное изображение, которое наряду с развлечениями, которые он приносит, позволяет сравнить скорость браузеров.

См. также